Issue when using jquery.Waypoints

[c9mb]

I have a site that uses jquery.Waypoints to initiate animation when page elements scroll into the viewport.

When I add OverlayScrollbars to the body element (on dom load) this appears to interfere/block the scroll-events triggering the waypoint activation - and so no animations are shown.

If I disable OverlayScrollbars, then jquery.Waypoints behaves as expected, and the page animations are activated when the elements scroll into view.

[c9mb]

Actually, the problem appears to be wider than just the plugin, and extends to general use of jquery.scroll() event, which this plugin also uses. I have other code relying on the jquery scroll() event handler, and it doesn't function when overlayscrollbars is active.

[KingSora]

Good day @c9mbundy!

Please create a minimal example on JSFiddle, CodeSandbox or StackBlitz. I really appreciate your detailed description, but without a example its very hard to figure out the problem.

[c9mb]

Ok, I'll try to find some time to do that, and see if I can repro in a simple example.

As you might imagine, my working application is quite complex, but the gist of the problem is that scroll events are not making it past overlayScrollbars for reasons I don't understand (likely stupidity on my part).

$('body').overlayScrollbars({ overflowBehavior: { x: "hidden" }, scrollbars: { autoHide: "move" }, callbacks: { onScroll: function (e) { console.log('Overlay: ', e); } } });
$(window).scroll(function (e) { console.log('Native-Window: ', e); })

No console output from $(window).scroll() - which explains why my other $(window).scroll() callbacks are not working.

But if I comment it out...

//$('body').overlayScrollbars({ overflowBehavior: { x: "hidden" }, scrollbars: { autoHide: "move" }, callbacks: { onScroll: function (e) { console.log('Overlay: ', e); } } });
$(window).scroll(function (e) { console.log('Native-Window: ', e); })

Then I get output from $(window).scroll() and everything starts working again.

[KingSora]

@c9mbundy that happens because OverlayScrollbars is generating its own DOM, and therefore the scroll event isn't actually happening anymore directly on the body element, but on a different element instead. This is something I plan to change in v2.0.0 of the plugin.

[c9mb]

I see - I seem to recall that scroll events don't bubble-up - so I assume that's why the document and window scroll events don't fire, as scrolling the entire page seems to be a special case that fires those.
I use window scroll events all the time, so I guess that's a show-stopper for me with the current version.
I'm pretty sure that WayPoints is using scroll events and also making the assumption of 'window' being the default element receiving scroll events for the entire page, so that perhaps explains it too.

[KingSora]

@c9mbundy yes, thats usually how such libraries work. Sometimes they provide a option where you can specify the viewport, then you could specify there the new element create by OverlayScrollbars. In jQuery Waypoints its the context option: http://imakewebthings.com/waypoints/api/context-option/

I've created a small example for you: https://jsfiddle.net/4akzm0fc/ maybe this helps :)

[c9mb]

Sorry for the delayed reply - I've been tied up on a project - rent to pay and all that,

Changes to Waypoints are helpful, thanks, but unfortunately doesn't address the primary issue of not being able to rely on Window/Document scroll events when OverlayScrollbars is applied to the body. I have existing code depending on Window/Document scroll events when the body scrolls, and I'm not sure how to work around that with this version.

[KingSora]

@c9mbundy Unfortunately you'll need to wait until the release of v2.0.0. I can't address this issue in v.1 because its definitely a breaking change.

[KingSora]

v2 released today where this issue should be fixed :)