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 plete 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.

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 plete 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.

• javascript
• ipad
• events
• safari
• scroll

1 Answer 1

<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>