Scrolling on OS X 10.x stops scrolling inside scroll area when viewing next chunk

[mikelittman]

It appears that the scroll handoff between clusters inside a large list causes some problems with OS X smooth scrolling. See video: http://d.pr/v/1fQ67

[klihelp]

Same happening for me too, tested on OSX Chrome. I scrolled with touchpad to the bottom of the container quite fast; it's works if you scroll slower

[abacaj]

Same here - Chrome 42, OSX 10.10

[NeXTs]

Thanks for the feedback. I'm working on it. I believe this happens when new cluster inserts to DOM, so as temporary workaround you could increase rows_in_block. In demo page it's specified about 25 everywhere, so you could try to set it 100. In total your table would contain 400 DOM elements, which anyway is better than 10000.

You could change that option in playground http://nexts.github.io/Clusterize.js/#playground

[mathieudutour]

Same happening when rows_in_block pushed to 100

[cameron]

Same thing here. Great demo, btw!

[tomasdev]

Yeah, depending on rows_in_block it will allow you to keep finger/wheel scrolling a bit more or less. I think the best fix for it (meaning not to have this bug even when doing a crazy-fast-as-flash scroll), is to use a library like iscroll or similar to overwrite the native scrolling.

[kpowick]

I'm seeing the same on OSX with inertial scrolling of the trackpad. However, using the scrollbar itself and dragging it up/down does not cause the problem - Even when dragging the scrollbar much faster than inertial scrolling of the trackpad. I suppose this is due to mouse pointer being "anchored" to the scrollbar control by its "mouse button down" event.

[MauricioKruijer]

I do experience the same thing. It's a lot less when you set the rows_in_block to 200 but then it's starting to lag... The demo is awesome :)

[as-com]

This might be related to #11 on other devices.

[skitiz]

I concur. While scrolling through lists, it jumps to the page scroll instead.

[NeXTs]

@mikelittman @klihelp @abacaj @mathieudutour @cameron @tomasdev @kpowick @skitiz

Hello guys, please check if last commit (v0.10.0) helps. Solution is a little bit crazy but it works in Chrome, as for me. I'm still experiencing this issue with Safari on Mac, because Safari doesn't apply style that added before scrolling. It apply style when scroll completes. I've tried various tricks to force Safari to redraw/repaint style, but without luck. Need some time for investigation.

Btw, someone please check other browsers on Mac.

[mathieudutour]

Working in chrome 45, firefox 37 and Safari 9

[kpowick]

Latest Chrome on OS X 10.10.4 is much better, though using the scrollbar still results in a smoother experience than inertial scrolling of the trackpad. Safari (8.0.7) still exhibits some "jerkiness" or temporary freezing of the scrolling list when using the trackpad. Using the scrollbar is ok.

[OscarGodson]

Yeah, in Safari scrolling locks up in Safari 9 for me too still. Has there been any progress on this or maybe a commit in a branch we can test?

Happens in the demos and in my own implementation I'm resizing other elements on the page based on the td widths whenever the clusters update and when it locks up it it makes the other elements to resize incorrectly by a lot.

[as-com]

There's also a strange issue about scrolling by dragging the scrollbar around in Safari 9.0.1: https://cloudup.com/cFkhiYqEuKT

[NeXTs]

@OscarGodson Unfortunately I have no my own Mac yet so I can not dive into it completely. @as-com Could you please provide some simplified codepen/jsfiddle example?

[vamp]

@as-com, @OscarGodson, @NeXTs, yep, just becase clusterize (scrollEv) needs to be added to wheel/scroll events (for scrollElement & document) and looks like it solves this issue.

small (paste before clusterize initialization):

var scrollHandler;
var scrollElement = ....;

                    if (scrollElement) {
                        var on = !!scrollElement.attachEvent, name = (on) ? 'attachEvent' : 'addEventListener', fn = document[name];
                        scrollElement[name] = function (eventName, handler) {
                            if (/scroll/i.test(eventName)) {
                                scrollHandler = handler;
                            }
                            return fn.apply(this, arguments);
                        };
                    }

/// clusterize initialization goes here

                    if (scrollHandler) {
                        delete (scrollElement[name]);
                        fn.call(scrollElement, (on ? 'on' : '') + 'wheel', scrollHandler, false);
                        fn.call(document, (on ? 'on' : '') +'scroll', scrollHandler, false);
                    }

also you need to care about destroy callback and installed handlers

[NeXTs]

@vamp I want keep scrolling native

[NeXTs]

Finally I got Mac with OS X v10.11.6 Can't reproduce this problem anymore. Works as expected in Chrome 55.0.2883.95, Safari 10.0.2, Firefox 50.1.0

Does someone still experience this problem? If not I'll close this issue in one month.