Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery live scroll event on mobile (work around)

The age old problem: Getting the scroll event to fire while a user is scrolling on an element while on a mobile site or app(web view).

All I'm looking for is access to the correct scrollTop() value while a user is scrolling my page on a mobile device instead of getting it when the user stops.

I'm sure there is a workaround somewhere, if I'm correct this limitation is set by iOS and there has been discussion over it for the past few years.

I've tried implementing native scroll emulators but none of them seem to be working how I want and to be honest it seems like overkill if all I really want is a persistent scrollTop() while a user is scrolling.

I'm currently thinking about maybe starting a counter on touchStart and stopping it on touchStop but something tells me I'm wasting my time.

Any help guys?

like image 946
Franky Chanyau Avatar asked Sep 12 '13 00:09

Franky Chanyau


People also ask

Does scroll event work on mobile?

jQuery Mobile provides two scroll events: when scrolling starts and when scrolling stops.

How can use scroll event in jQuery?

jQuery scroll() MethodThe scroll event occurs when the user scrolls in the specified element. The scroll event works for all scrollable elements and the window object (browser window). The scroll() method triggers the scroll event, or attaches a function to run when a scroll event occurs.

How does Onscroll work?

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

With jQuery:

$('body').bind('touchmove', function(e) {      console.log($(this).scrollTop()); // Replace this with your code. }); 

This should give you a consistent stream of the scrollTop value when the user scrolls, but be careful as it's going to fire even while the user is just holding his finger on the screen.

Note that if you're using jQuery >= 1.7 the preferred binding method is .on() instead of the .bind() method I've used in my example. In that case my example would be

$('body').on({     'touchmove': function(e) {          console.log($(this).scrollTop()); // Replace this with your code.     } }); 

Source: https://github.com/dantipa/pull-to-refresh-js/blob/master/jquery.plugin.pullToRefresh.js

like image 180
Thanos Siopoudis Avatar answered Sep 21 '22 19:09

Thanos Siopoudis


maybe you could take a look at how iScroll does it in their _move-method which is bound to the touchmove event: https://github.com/cubiq/iscroll/blob/master/src/core.js#L152

It's a bit complicated but i'm sure you'll figure it out. You could also just use iScroll to begin with and bind to their scrollmove event (I'm not sure how it's called on iScroll 5 but it was onScrollMove in iScroll 4). that.y will then give you the correct value.

like image 31
urz0r Avatar answered Sep 18 '22 19:09

urz0r