Firefox scrollTop problem

Question

I have a problem with Firefox scrollTop value and onscroll event. This works great in IE, Safari and Chrome but Firefox seems to lag.

I tried to update some background position with the onscroll event, but when I take the handle and drag it up and down quickly, Firefox stops updating the scrollTop value and it causes some lag in my app.

You can try this code and look in the Firefox console when dragging the handle and you will see the values something stops the updating :

function SaveScrollLocation () {
    console.log(document.documentElement.scrollTop);
}

window.onscroll=SaveScrollLocation ;

Any idea how to make Firefox respond more quickly?

Answer 1

Wouldn't the behavior of dragging the window up and down quickly be considered abnormal?

In my view, I wouldn't want to be saving the state if the user is doing that. I'd rather wait until the window has been in the same spot for at least 250ms before recording it's position. The minor variances in position while the user is slamming the scrollbar up and down are probably not very important to the user, know what I mean?

With a little setTimeout magic, couldn't you sidestep this issue AND make your script a little lighter on the browser UI by not firing the SaveScrollLocation until it clear the scroll location is WORTH saving?

Answer 2

There are two ways to handle this - throttle (execute the function with a set interval) and debounce (execute the function after the specified time has passed since the last call). You'll probably want to use throttling in your situation.

A simplified solution may look something like this (Updated: see it at http://jsfiddle.net/yVVNU/1/):

    window.onscroll=catchScroll;
    var timeOutId = 0;
    var jitterBuffer = 200;
    function catchScroll()
        {
            if (timeOutId) clearTimeout (timeOutId);
            timeOutId = setTimeout(function(){SaveScrollLocation()}, jitterBuffer);
        }

    function SaveScrollLocation () {
        console.log(document.documentElement.scrollTop);
        alert('scrolled');
    }

You can also use this jQuery plugin: http://benalman.com/projects/jquery-throttle-debounce-plugin/

Answer 3

var last = +new Date;

function SaveScrollLocation () {
    var now = +new Date;
    if (now - last > 50) {
      // ...
      last = now;
    }
}

window.onscroll = SaveScrollLocation ;

Answer 4

Firefox does not (or did not used to) fire the onscroll event as frequently as the other browsers. see here

Interestingly the scrollTop does update at the correct frequency so you can probably use another event such as mousemove. What i did was something like this :

on first scroll event, start listening to mouse move events - update whatever it is you want to based on the scrollTop which does update correctly. After a short timeout has elapsed after an onscroll, stop listening for mouse move events.

Answer 5

$(window).scrollTop() worked for me