I use $(window).scroll()
event to add animations to my elements.
Is there any way to make the scroll()
event fires when the touch is dragging (to scroll down/up) ?
Example code:
$(window).scroll(function(){
console.log('fired');
});
Last, here is a demo page (can't use JSFiddle well in mobile, thus I host it elsewhere). Please try it on Desktop & Mobile browsers. For your convenience, here is the QR code:
The scroll event fires when the document view has been scrolled. For element scrolling, see Element: scroll event . Note: In iOS UIWebViews, scroll events are not fired while scrolling is taking place; they are only fired after the scrolling has completed. See Bootstrap issue #16202.
scrollIntoView does not trigger mousewheel nor scroll event in Angular. Save this question.
Definition and Usage. The onscroll event occurs when an element's scrollbar is being scrolled. Tip: use the CSS overflow style property to create a scrollbar for an element.
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!
You probably want to use this:
document.addEventListener("touchmove", touchScrollHandler, false);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With