I was able to implement react-waypoint successfully in combination with a div that had been set to overflow-y: scroll. I've set the bottom offset to 300 and am reacting to the onEnter event. This combination works just fine.
However, I then wanted to use the same approach on a scrolling page, without a scrollable div, i.e. just the regular browser window. react-waypoint picks up the window as its scroll ancestor, and everything seems to be setup correctly. It works fine under Chrome on macOS. If I try to scroll on an iOS device, however, nothing happens. If I enable debug mode, only the scroll ancestor and its dimensions are being printed out, but nothing happens if I start scrolling. It confuses me, because this scenario seems to be the simpler scenario to me.
I was able to implement
react-waypoint
successfully in combination with adiv
that had been set tooverflow-y: scroll
. I've set the bottom offset to 300 and am reacting to theonEnter
event. This combination works just fine.However, I then wanted to use the same approach on a scrolling page, without a scrollable
div
, i.e. just the regular browser window.react-waypoint
picks up the window as its scroll ancestor, and everything seems to be setup correctly. It works fine under Chrome on macOS. If I try to scroll on an iOS device, however, nothing happens. If I enabledebug
mode, only the scroll ancestor and its dimensions are being printed out, but nothing happens if I start scrolling. It confuses me, because this scenario seems to be the simpler scenario to me.What might go wrong here?