1

When using the -webkit-overflow-scrolling: touch; style on a mobile element, capturing the scroll events can be extremely tiresome as they are triggered by 'flicking', 'panning' and when the scroll itself stops.

Unlike desktop browsers, this makes it a nightmare to try to detect when either, the element is currently being scrolled, or, the element has finished scrolling.

I have researched around SO and the web a hell of a lot and have ascertained that the only viable solution (that I can think of) is to create a function that captures the first touch of the scroll, ignores any subsequent pan's and then captures the final scroll event.

If this could be accomplished, somehow, then an incremented value could represent scrollend whenever it is even...

I have written the following but I have ommitted the touch events as I do not really know where to start with this part:

var checklist_scroll = 0; // Whenever this value is even, it means the scroll has ended
$('ul').on('scroll',function(){
    checklist_scroll++; // Only do this for 'scrollstart' and 'scrollend', NOT when panning through the list
});

Then, for any other event, you could do

$('li').on('tap',function(){
    // Only make the elements selectable when parent is not scrolling
    if(checklist_scroll%2===0){
        // Select the li
    }
});
Ben Carey
  • 16,540
  • 19
  • 87
  • 169
  • scrollstart, stop events are only provided with jquery mobile. with jquery you have only scroll. if you want to detect a scroll start, stop you need to add a library -- https://github.com/ssorallen/jquery-scrollstop -- check here also for a possible scroll solution -- http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling – Tasos Feb 09 '16 at 18:33
  • @Tasos Please can you post up the link to scrollstop in an answer as I was able to solve my issue using it. Once you have posted the answer, I can edit it with the code and then accept it as the answer to give you the credit :-) – Ben Carey Feb 10 '16 at 17:23

1 Answers1

2

You can use jquery-scrollstop plugin to add scroll start/stop detection functionally.

See this example:

var scrolling = false;
$('#some_element').on('scrollstart',function(){
    scrolling = true;
});
$('#some_element').on('scrollstop',function(){
    scrolling = false;
});

$('#some_tappable_element').hammer().on('tap pressup',function(){
    // Use a timeout to ensure the scrolling var has been updated
    setTimeout(function(){
        if(!scrolling){
            // Select the element
        }
    },10);
});
Ben Carey
  • 16,540
  • 19
  • 87
  • 169
Tasos
  • 5,321
  • 1
  • 15
  • 26
  • Thank you very much for this! The events don't fire quite as you would expect them to, but they work well enough to provide a viable solution to the issue. – Ben Carey Feb 10 '16 at 17:33
  • @Ben Carey -- looks ok. i assume you have a timing issue -- have you tried using the (setTimeout(function(){ .. ) inside the (scrollstop) function instead of the (tap)? – Tasos Feb 10 '16 at 17:38
  • Its not really a timing issue, I would actually expect it. Because the `tap` event and the `scrollstop` event are fired at the same time, the `scrolling` var has been set by the time the `tap` function executes, so it has to delay a little bit in order to catch the correct value. I could probably get away by setting the timeout value to 1 but I wanted to be sure and as it doesnt make any different to the user, it should be okay – Ben Carey Feb 10 '16 at 17:40
  • @Ben Carey -- ok, it works as expected -- keep in mind that hammer js has settings and might be able to tune the threshold limit, when i used hammer i played around with these and they do make a difference -- http://hammerjs.github.io/recognizer-tap/ – Tasos Feb 10 '16 at 18:02