JavaScript水平滑块

我正在尝试为一个我自己练习/享受的项目编写一个没有JQuery的水平滑块

以下是相关代码：

function moveit() {
    "use strict";
    document.getElementById("position").style.left = window.event.clientX + "px";
}

window.onload = function () {
    "use strict";
    findtime();
    document.getElementById("scrollbar").style.width = document.getElementById("thevideo").offsetWidth + "px";
    var mousemove;
    document.getElementById("scrollbar").onclick = function () {
            mousemove = window.setInterval("moveit()", 1000);
    };
    document.getElementById("scrollbar").mouseup = function () {
            window.clearInterval(mousemove);
    };
};

不用说，我对它有意见。它不断在Chrome、Firefox等浏览器上生成错误：

Uncaught TypeError: Cannot read property 'clientX' of undefined

现在，如果我运行以下代码，它会工作，但是（但对以下鼠标位置不有用）：

HTML格式如下：

<?php include("header.php"); ?>
            <div>
                    <video id="thevideo">
                            <source src="movie.ogv" type="video/ogg" />
                    </video>
            </div>
            <div>
                    <span id="currenttime" contenteditable="true">0:00</span> / <span id="totaltime"></span>
            </div>
            <div id="scrollbar">
                    <div id="position" draggable="true"></div>
            </div>
<?php include("footer.php"); ?>

0:00 / 

这是我不久前做的一些东西，也许你可以根据你的程序进行调整

var scrollTimer;

function Timer(callback, delay) {
    var timerId, start, remaining = delay;
    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
    };
    this.resume = function() {
        start = new Date();
        timerId = window.setTimeout(callback, remaining);
    };
    this.resume();
}

function scroll(down) {
  var scrollframe = document.getElementById("contentframe");
  var curY = document.all?
    scrollframe.contentWindow.document.body.scrollTop
  : scrollframe.contentWindow.window.pageYOffset;
  var delta = 5;
  var newY = down? curY+delta : curY-delta;
  scrollframe.contentWindow.scrollTo(0,newY);
}

function autoscroll(down) {
  scroll(down);
  scrollTimer = new Timer(function() {
    autoscroll(down);
  }, 20);
}

function stopscroll() {
  scrollTimer.pause();
}

功能scroll（布尔向下）导致单个增量向上或向下滚动到iframe

contentframe

。计时器用于重复该操作，下面是如何使用它：

<a href=#>
<img src="scroller/arrowTop.png" title="Scroll Up"
    onMouseOver="autoscroll(false);" onMouseOut="stopscroll();"/>
</a>

---

希望这能有所帮助。

您就快到了-在标准JS中没有

窗口。event

对象。因此，请使用：

---

注意：这是一个垂直滚动条。您必须更改它，使其更改

window.pageXOffset

和

body.scrollLeft

而不是

window.pageYOffset

和

body.scrollTop

，以使其在水平面上工作。不要忘记

contentWindow.scrollTo（newX，0）

um，我不确定我是否理解这个代码：document.all？scrollframe.contentWindow.document.body.scrollTop:scrollframe.contentWindow.window.pageYOffset；。为什么是问号，为什么是冒号？@user798080这是一个简写的条件语句，与写这句话相同：

var curY；如果（document.all）curY=scrollframe.contentWindow.document.body.scrollTop；else curY=scrollframe.contentWindow.windiw.pageYOffset。你应该如何阅读
x=（条件）？a:b为
将x分配给（如果条件为真，则返回A，否则返回B）
<a href=#>
<img src="scroller/arrowTop.png" title="Scroll Up"
    onMouseOver="autoscroll(false);" onMouseOut="stopscroll();"/>
</a>

function moveit(e) {
    "use strict";
    document.getElementById("position").style.left = e.clientX + "px";
}

window.onload = function (e) {
    "use strict";
    findtime();
    document.getElementById("scrollbar").style.width = document.getElementById("thevideo").offsetWidth + "px";
    var mousemove;
    document.getElementById("scrollbar").onclick = function () {
            mousemove = window.setInterval(moveit, 1000);
    };
    document.getElementById("scrollbar").mouseup = function () {
            window.clearInterval(mousemove);
    };
};