Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firing rate of $(window).scroll event in mobile browser

Tags:

jquery

I use $(window).scroll() event to add animations to my elements.

  • In desktop browsers, the event is fired when mouse is scrolling.
  • In mobile browsers, the event is fired when drag & touch has ended.

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:

enter image description here

like image 685
Raptor Avatar asked Jan 11 '14 03:01

Raptor


People also ask

How often does scroll event fire?

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.

Does scrollIntoView trigger scroll event?

scrollIntoView does not trigger mousewheel nor scroll event in Angular. Save this question.

What is Onscroll event?

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.


2 Answers

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!

like image 142
Dan Avatar answered Oct 11 '22 07:10

Dan


You probably want to use this:

document.addEventListener("touchmove", touchScrollHandler, false);
like image 24
joseeight Avatar answered Oct 11 '22 07:10

joseeight