Question

我目前使用$(window).bind('scroll', foo);监视$（窗口）.scrollTop（）并执行操作以创建视差效果。

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

我添加$(window).bind('touchmove', foo);以确保在iOS中滑动期间调用该函数，它让我更进一步。当用户松开手指时，页面会继续滚动，但事件会停止触发。

有什么想法吗？

Answer 1

当我看到你的问题时，我打算为此做一个polyfill（如果不存在？）。不幸的是，我的时间很少。

我们的想法是拥有setInterval，该ontouchstart已启动document.body.scrollTop，并会检查clearInterval自上次以来是否发生了变化，例如：每20毫秒。如果是，那么我们手动调度滚动事件。否则我们{{1}}因为显然没有更多的滚动发生。

这将是简短的。如果你有更多的时间（比我更多），那么请随意尝试这些指导。

编辑：现在，进一步阅读，其他答案似乎也提出了同样的想法。您确定在iPad上滚动时间隔是否已停止？

Answer 2

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

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

<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

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

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

Answer 3

Apple的iPhone 5c网页使用了一些视差滚动效果，这些效果似乎会在您的手指仍然触摸屏幕和滚动时继续。所以我想在滚动期间不能完全禁用javascript。 Tumult Hype也提供此功能。

Answer 4

虽然这不是开箱即用的，但可以说，你可以使用iscroll

来实现

因此，您可以使用iScroll for iOS和Android移动设备/平板电脑，并使用您目前为桌面设备执行此操作的方式。

iScroll有一些选项可以在某些事件上调用回调函数 - 例如'onScrollMove'，'onBeforeScrollEnd'，'onTouchEnd'等。不幸的是，没有一个选项可以在“每个位置更改”上执行回调，包括用户停止触摸屏幕后滚动动量引起的变化“。但是，添加一个很容易。

在iScroll源中，在第127行附近，在“// Events”注释附近添加一个新变量：

onPosChange: null

然后，在第308行附近，在“_ pos”函数的末尾添加以下行：

if (this.options.onPosChange) this.options.onPosChange.call();

（只会调用“onPosChange”选项中传递的函数，如果存在的话）。

完成后，以下示例代码将为id =“iscroll_container”的div设置iScroll，并在每次更改时将Y偏移量打印到控制台：

var myScroll;
function loaded() {
    myScroll = new iScroll('iscroll_container', { onPosChange: actOnScroll });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

//Use this for high compatibility (iDevice + Android)
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

function actOnScroll(){
    console.log('got a scroll move! Vert offset is: ' + myScroll.y);
}

注意，Ben the Bodyguard Parallax Site可以通过iScroll在iPad上运行（他们使用的是更旧版本的iscroll，而不是按照我在此描述的方式完成）

此外，Life of Pi Parallax Site非常适合在iPad上运行 - 我无法弄清楚他们是如何做到的，但至少它证明了它是可能的！

Answer 5

这可能是jQuery本身的一个错误：http://bugs.jquery.com/ticket/6446

该故障单已经打开了一段时间并且属于iOS 4，但也许您应该调查用纯JavaScript来计算滚动位置。

Answer 6

据我所知，在大多数移动设备上滚动时都没有javascript执行。那里有一些解决方法（f.e. iscroll）。 Iscroll正在使用css-technique“转换”。但滚动时无法执行javascript。我认为平滑滚动算法太贵了。

如何在iOS上的Safari中滚动时监控滚动位置？

6 个答案: