如何在iOS上的Safari中滚动时监控滚动位置？ [英] How can I monitor scroll position while scrolling in Safari on iOS?

问题描述

我目前使用 $（窗口）.bind（'scroll'，foo）; 监视$（窗口）.scrollTop（）并执行创建视差的内容效果。

I currently use $(window).bind('scroll', foo); to monitor $(window).scrollTop() and do stuff to create a parallax effect.

在所有桌面浏览器中，为用户滚动的每个像素调用foo（），一切都很好，花花公子。在iOS上的Safari中，滚动事件仅在滚动完成后触发。

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.

我添加了 $（窗口）.bind（'touchmove' ，foo）; 以确保在iOS中滑动期间调用该函数，它让我更进一步。当用户释放手指时，页面会继续滚动，但事件会停止触发。

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.

任何想法？

推荐答案

我强烈推荐使用Skrollrjavascript库。它是迄今为止我发现的最好的移动滚动动画选项，并且很容易快速启动和运行。根据开始和结束滚动位置创建动画并操纵CSS。为大多数标准CSS属性创建尽可能多的数据滚动位置和动画。

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.

在下面的示例中，背景颜色将在500像素滚动的过程中设置动画：

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>

在Git上查看存储库： https://github.com/Prinzhorn/skrollr

Checkout the repository on Git: https://github.com/Prinzhorn/skrollr

Skrollr演示示例： http://prinzhorn.github.io/skrollr/

Skrollr Demo Example: http://prinzhorn.github.io/skrollr/

真棒世界示例： http://www.fontwalk.de/03/

这篇关于如何在iOS上的Safari中滚动时监控滚动位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！