Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iPad scrolling - what events fire during scrolling?

I've been searching around to find out what events are triggered when you scroll on an iPad on webpages.

There is this source: https://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Which indicates the following are fired:

ontouchstart="touchStart(event);"

ontouchmove="touchMove(event);"

ontouchend="touchEnd(event);"

ontouchcancel="touchCancel(event);"

The problem is how to deal with the momentum scrolling when a user flicks to scroll. I think the onsroll event only fires when the scrolling has finished.

Does anyone know if any events are fired when the momentum scrolling is occuring so you can do checks as the page is scrolling under this 'momentum'?

cheers

like image 563
Sam Avatar asked Jan 24 '13 12:01

Sam


People also ask

How often does scroll event fire?

The scroll event fires when the document view has been scrolled. For element scrolling, see Element: scroll event . Note: In iOS UIWebViews, scroll events are not fired while scrolling is taking place; they are only fired after the scrolling has completed. See Bootstrap issue #16202.

What are scroll start and scroll stop events?

For a page, the scrollX and scrollY properties return the number of pixels that the document is currently scrolled horizontally and vertically. For an element, the scrollTop and scrollLeft properties set or get the number of pixels that the element's content is vertically scrolled and scrolled from its left edge.

Do something on scroll react?

To handle the onScroll event in React: Set the onScroll prop on an element or add an event listener on the window object. Provide an event handler function. Access relevant properties on the event or window objects.

Do scroll events bubble?

The scroll event does not bubble up. Although the event does not bubble, browsers fire a scroll event on both document and window when the user scrolls the entire page.


1 Answers

The problem is that on an iPad the scroll does not continuously fires. It only fires once when you stop scrolling. As far as I know you cannot solve this.

On the desktop this is not the case. Here during scrolling the browser continuously fires the scroll event.

I noticed this behaviour when I was working on a parallax scrolling website. On iOS everything stuttered because the scroll event was only firing once.

However it is possible to simulate as described here: javascript scroll event for iPhone/iPad?

like image 176
Bas van Dijk Avatar answered Oct 19 '22 20:10

Bas van Dijk