civiccc
onEnter is not being fired on mobile device
Hi,
I'm facing a weird behavior of the react-waypoint on mobile devices. In case we open the application on desktop it works perfect and when we change the user agent using Chrome it works fine as well.
But in case we refresh the page with the mobile user agent it doesn't work! However I'm not sure that issue has something directly to do with the react-waypoint but I would appreciate if anyone could help me.
Are all mobile browsers failing or is it a specific one? We don’t look at the user-agent string in react-waypoint, but you might have a difference in layout/styling depending on screen width which might affect how waypoints behave. The reason the waypoint fires when you switch user-agent in chrome is likely because a resize event is detected when the screen changes size.
You can try using the debug prop to see if there’s anything useful things being logged. And feel free to post the output here, I might be able to help.
I am having the same problem. When using debug, it just log
Arguments(2) ["scrollableAncestor", div.DashboardPage.collapsed, callee: (...), Symbol(Symbol.iterator): ƒ] Arguments(2) ["waypoint top", 493, callee: (...), Symbol(Symbol.iterator): ƒ] Arguments(2) ["waypoint bottom", 493, callee: (...), Symbol(Symbol.iterator): ƒ] Arguments(2) ["scrollableAncestor height", 616, callee: (...), Symbol(Symbol.iterator): ƒ] Arguments(2) ["scrollableAncestor scrollTop", 0, callee: (...), Symbol(Symbol.iterator): ƒ] Arguments(2) ["currentPosition", "inside", callee: (...), Symbol(Symbol.iterator): ƒ] Arguments(2) ["previousPosition", undefined, callee: (...), Symbol(Symbol.iterator): ƒ]
once when inital, and then no any log even when I scroll (actually, I slide).
@damdauvaotran It looks like div.DashboardPage.collapsed is being picked up as the scroll container, is that the one you expected? If not, you can override the auto-assignment with the scrollableAncestor prop, e.g. scrollableAncestor={window} The readme has a section on this here: https://github.com/brigade/react-waypoint#containing-elements-and-scrollableancestor.