.ScrollLeft 在 Firefox 问题

Question

我有这个脚本：

<script>
    Array.prototype.forEach.call(document.querySelectorAll(".thumbs  div"), function ($div) {
        $div.style.width = document.querySelectorAll("   img").length * 100 / 4 + "px";
    });
    document.querySelector("#next").onclick = function () {
        var i = 100;
        var intervalId = setInterval(function () {
            document.querySelector(".thumbs").scrollLeft += 1;
            if (i == 0) {
                clearInterval(intervalId);
            }
            i--;
        });
    };
    document.querySelector("#prev").onclick = function () {
        var i = 100;
        var intervalId = setInterval(function () {
            document.querySelector(".thumbs").scrollLeft -= 1;
            if (i == 0) {
                clearInterval(intervalId);
            }
            i--;
        });
    };
</script>

单击下一个或上一个按钮时滚动滑块。在 Opera 和 Chrome 中，它工作正常 - 单击按钮，.thumbs 滚动 100px。但在 Firefox 中，只需单击一下，它就会滚动 1px。

我该怎么做才能解决这个问题？

Answer 1

那是因为您没有将间隔延迟传递给 setInterval，因此 Firefox 只运行一次。其他浏览器似乎将其视为您正在传递它 0（最小延迟）。

只需将 0 或您喜欢的任何值传递给您的两个间隔。

http://jsfiddle.net/ar8au1o6/1/

var intervalId = setInterval(function () {
    document.querySelector(".thumbs").scrollLeft += 1;
    if (i == 0) {
        clearInterval(intervalId);
    }
    i--;
}, 0); // <-- Set each interval in your code to 0, 
       // Or any other delay.
       // If you set it to 0, the browser will pick the minimum delay.

.ScrollLeft 在 Firefox 问题

.ScrollLeft in Firefox issue

javascript

firefox

jquery

scroll