Question

You can actually see this effect on the SimplyScroll demo page: use Safari, Chrome or Firefox, and zoom out to the point that page elements are very small, and the scroller stops moving.

I’ve tested and experimented, and it appears that the scrollLeft value is being incremented within a setInterval loop, but it doesn’t “stick”, and just stays at the previous scroll value instead. Even more strangely, altering the scroll value manually from the console works just fine.

Here is the relevant snippet:

self.interval = setInterval(function() {
    // snip

    // increment by 1 pixel
    self.$clip[0].scrollLeft += self.o.speed;

    // scrollLeft value is unchanged

    // snip

},self.intervalDelay); // usually set to 41

I’ve tried replacing setInterval with requestAnimationFrame, and also drastically turning down the speed, and no results; I’m stumped. Any ideas on why zoom level is affecting the ability to scroll within a timer callback?

Answer 1

I figured it out: it looks like it has do with what constitutes a “pixel” when zoomed out; a single-pixel change evaluates to being less than one pixel, which leads to no change. I plan to file a bug report with the developer; for now, I’ve implemented the following hack workaround:

self.interval = setInterval(function() {

    // snip

    var elem = self.$clip[0];
    var scrollLeft = elem.scrollLeft

    // increment by 1 pixel
    elem.scrollLeft += self.o.speed;

    // Zoom out hack: raise pixel values until a change actually takes place
    if(elem.scrollLeft == scrollLeft) {
        elem.scrollLeft += (self.o.speed + 1);
        if(elem.scrollLeft == scrollLeft)
            elem.scrollLeft += (self.o.speed + 2);
    }

    // snip

},self.intervalDelay);