.ScrollLeft in Firefox issue

Question

I have this script:

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

That scrolls the slider thumbs when clicking the next or prev buttons. In Opera and Chrome, it works fine - with one click to the button, .thumbs scrolls 100px. But in Firefox, with one click, it scrolls 1px.

What can I do to fix that?

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.