I've been playing with catching scroll realtime on most popular browsers on mobile and touch devices for over a week!
I have tried many approaches like putting setInterval
or requestAnimationFrame
loop or catching scroll
or touchmove
or web workers or whatever. I can tell you that nothing works on iOS 4 - 7, the browser just freezes any script execution. Browser for Android, mobile Chrome or Firefox or Dolphin track scroll
well, so you can deal with momentum scrolling there. Latest internet explorer mobile, Blackberry, Opera mobile and most Symbian browsers track scroll
as well.
There is a brilliant way to do things on iOS, however. This guy emulates scroll using CSS3 transform: translateY
: https://github.com/joehewitt/scrollability/blob/master/scrollability.js Actually, javascript/CSS fully emulate what iOS Safari does natively.
This works without any lags because of using GPU accelerations and has no restrictions. You can even change scroll parameters like friction or responsivity. The downside is that you need to serve another styles or markup for iOS only. You can use media queries or browser detection for this. Please find some demos online, because the author provides no clear documentation. Example: stellar.js iOS Paralax demo. There are some other examples available.
To track the current scroll position use something like this:
var page = document.getElementById('page');
var scrollTop = isIOS ?
-(new WebKitCSSMatrix(getComputedStyle(page).webkitTransform)).m42 :
window.scrollY;
Fire this inside requestAnimationFrame loop. Unfortunately you can't fetch the scroll coordinates in a more elegant way than using WebKitCSSMatrix
in this version of library. But you can make a pull request for this.
Hope this will work for you!
touchmove
may helptouchend
event only, and after you get the touchend coordinates, the content still scrolls half screen down.touchmove
returns correct values but cannot replacescroll
due to reasons listed above.