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.
jQuery Mobile provides two scroll events: when scrolling starts and when scrolling stops.
Safari mobile doesn't support touch events.
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.
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.
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With