How can I monitor scroll position while scrolling in Safari on iOS?
I currently use $(window).bind('scroll', foo); to monitor $(window).scrollTop() and do stuff to create a parallax effect.
In all desktop browsers foo() is called for each pixel the user scrolls, and everything is nice and dandy. In Safari on iOS, the scroll event is only fired AFTER the scrolling is finished.
I added $(window).bind('touchmove', foo); to make sure the function is called during the swipe in iOS, and it got me a little bit further. When user releases finger, the page continues to scroll, but the event stops firing.
Any ideas?
When I saw your question, I was planning to do a polyfill for this (if such does not exist?). Unfortunately I've had very little time.
The idea is to have a setInterval , which is initiated ontouchstart , and it checks whether document.body.scrollTop has changed since last time, eg. for every 20 milliseconds. And if it is, then we manually dispatch the scroll event. Otherwise we clearInterval since apparently there's no more scrolling happening.
This it would be in brief. If you got more time (than I do), then feel free to try with those guidelines.
Edit: Now, reading further, the same idea is seems to be suggested on the other answer. Are you certain that intervals are stopped whilst scrolling on iPad?
I highly recommend using the "Skrollr" javascript library. It is by far the best mobile scrolling animation option that I've found to date and is very easy to get up and running quickly. Create animations and manipulate CSS based on a start and end scroll position. Create as many data scroll positions and animations as you need for most standard CSS properties.
In the following example the background color would animate over the course of a 500 pixel scroll:
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div>
Checkout the repository on Git: https://github.com/Prinzhorn/skrollr
Skrollr Demo Example: http://prinzhorn.github.io/skrollr/
Awesome real world example: http://www.fontwalk.de/03/
Apple's webpage for iPhone 5c uses some parallax scrolling effects that seem to continue with your finger still touching the screen and scrolling. So I guess javascript can't be entirely disabled during scroll. Tumult Hype provides this functionality too.
链接地址: http://www.djcxy.com/p/95620.html上一篇: 了解触摸事件