I’m trying to implement a new feature on my site, namely moving between form pages using the mouse wheel. I tried to use event “wheel” which perfectly works on desktop, however does not trigger on mobile (iphone – Safari and Chrome). I assume the mobile APIs of these browsers just do not support it, so I’m curious how to trigger it somehow.
I’ve tried wheel event and mousewheel as well – neither works. I’m listening along with “wheel” the event “scroll” to prevent change form pages if scroll does not reach top or bottom of the page. As I said desktop – perfect, mobile (iphone) – does not work at all.
Advertisement
Answer
On mobile you should listen to touch events, either touchend (if you want to move pages once the “scroll” motion is done) or touchmove (if you want to move pages during the scroll). Either way, in your event callback you can calculate if you’re at the bottom of the page and then react accordingly:
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
// at bottom of page
}