CODEWITHSUNDEEP
javascriptjqueryfirefoxscroll
CroaToa
CroaToa

Reputation: 910

.ScrollLeft in Firefox issue

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?

Upvotes: 0

Views: 427

Answers (1)

user4698813
user4698813

Reputation:

That's because you aren't passing an interval delay to setInterval, and so Firefox only runs it once. Other browsers seem to take it as if you were passing it 0 (the minimum delay).

Just pass 0 or any value you like, to both of your intervals.

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.

Upvotes: 1

Related Questions