javascript - .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>

单击下一个或上一个按钮时会滚动 slider 。在 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.