9

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

7
  • I kinda feel binding touchmove may help
    – Alexander
    Commented Jan 11, 2014 at 4:01
  • @Alexander it won't help when we have momentum scrolling
    – Dan
    Commented Apr 30, 2014 at 22:29
  • @Dan, fair enough. Although, this question is not about momentum scrolling
    – Alexander
    Commented May 5, 2014 at 10:33
  • @Alexander, the question is about monitoring scroll on mobile devices. Since most devices add inertia to their scrolling, it should definitely be taken into account. Imagine you track touchend event only, and after you get the touchend coordinates, the content still scrolls half screen down.
    – Dan
    Commented May 6, 2014 at 13:34
  • 1
    @Alexander yes, touchmove returns correct values but cannot replace scroll due to reasons listed above.
    – Dan
    Commented May 6, 2014 at 14:24

2 Answers 2

3

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!

0
1

You probably want to use this:

document.addEventListener("touchmove", touchScrollHandler, false);
3
  • Can you elaborate? touchScrollHandler is not defined too. My question is about jQuery, not traditional JavaScript. Also, for touchmove event, how does it perform in desktop browser?
    – Raptor
    Commented Jan 11, 2014 at 4:18
  • Sorry, I had assumed plain JavaScript would be okay, the touchScrollHandler is a plain function you define and will get an event, you could then calculate the scroll position by checking the scroll position of the page. Here's the a jQuery implementation that will make more sense to you: forrst.com/posts/jQuery_iPad_one_finger_scroll-B30
    – joseeight
    Commented Jan 11, 2014 at 4:48
  • Tried $('body').on('touchmove'), it behaves the same as scroll()
    – Raptor
    Commented Jan 12, 2014 at 4:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.