Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Events for Inertial Scrolling on Mobile Safari

I am currently using overflow:scroll on a web page optimized for the iPad, and it works great. I began running into trouble with touch events on the items in the scrolling div, because it was interpreting the scrolling swipes as touches. Since there is no scroll complete event, and the scroll event fires each time you scroll, I tried detecting the scroll event and setting a timer to disable the touch event temporarily. However, I have discovered that the scroll event only fires each time the user initiates a scroll, which is rarely with inertial scrolling.

Is there a constantly firing scroll event or some other way to detect that scrolling is currently happening?

This is only a problem with inertial scrolling on Mobile Safari, because when you move your mouse on OS X, inertial scrolling automatically stops, so to initiate the click event, you would generally need to move the mouse, thus avoiding a conflict. You also don't have the dual use input of touch for scrolling and touch for tapping.

like image 972
Adrian Harris Crowne Avatar asked Mar 22 '12 21:03

Adrian Harris Crowne


People also ask

Does scroll event work on mobile?

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

Does Safari support touch events?

Safari mobile doesn't support touch events.

What is momentum scrolling?

Use momentum-based scrolling, where the content continues to scroll for a while after finishing the scroll gesture and removing your finger from the touchscreen. The speed and duration of the continued scrolling is proportional to how vigorous the scroll gesture was. Also creates a new stacking context.

What is scroll event throttle?

Scroll event throttling Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications. Instead, it is recommended to throttle the event using requestAnimationFrame() , setTimeout() , or a CustomEvent , as follows.


1 Answers

<script type="text/javascript">
<!--
    document.addEventListener("touchmove", ScrollStart, false);
    document.addEventListener("scroll", Scroll, false);
    function ScrollStart() {
        //start of scroll event for iOS
    }
    function Scroll() {
        //end of scroll event for iOS
        //and
        //start/end of scroll event for other browsers
    }   
// -->
</script>
like image 88
羅怒奈折馬 Avatar answered Oct 22 '22 03:10

羅怒奈折馬