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



我目前使用$(window).bind('scroll', foo);来监控$(window).scrollTop(),并做一些事情来创建视差效果。

在所有的桌面浏览器中,用户滚动的每个像素都会调用foo(),一切都很好。在iOS上的Safari中,只有在滚动完成后才会触发滚动事件。

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

有什么想法吗?

当我看到你的问题时,我正计划为此做一个polyfill(如果不存在的话?)。不幸的是,我的时间很少。

这个想法是有一个setInterval,它由ontouchstart启动,它检查document.body.scrollTop自上次以来是否发生了变化,例如每20毫秒。如果是,那么我们手动调度滚动事件。否则我们clearInterval,因为显然没有更多的滚动发生。

这将是简短的。如果你(比我)有更多的时间,那就试一下这些指导方针吧。

编辑:现在,进一步阅读,似乎在另一个答案上提出了同样的想法。你确定在iPad上滚动时会停止间隔吗?

我强烈建议使用"Skrollr"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/

苹果iPhone 5c的网页使用了一些视差滚动效果,当你的手指仍然触摸屏幕并滚动时,这些效果似乎会继续。所以我想javascript不能在滚动过程中完全禁用。Tumult Hype也提供了此功能。

虽然这不可能开箱即用,但可以使用iscroll

因此,您可以将iScroll用于iOS和Android移动设备/平板电脑,并使用当前用于桌面设备的方式。

iScroll有一系列选项,用于在某些事件上调用回调函数,如"onScrollMove"、"onBeforeScrollEnd"、"on TouchEnd"等。不幸的是,没有一个选项可以在"每次位置更改,包括用户停止触摸屏幕后滚动动量引起的更改"时执行回调。但是,添加一个就足够容易了。

在iScroll源代码的第127行附近,靠近"//事件"注释,添加一个新变量:

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网站使用iScroll在iPad上工作(他们使用的是旧版本的iScroll,并没有完全按照我在这里描述的方式进行)

此外,Pi Parallax网站在iPad上运行得非常好——我不知道他们是怎么做到的,但至少它证明了这是可能的!

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

该票证已经打开了一段时间,适用于iOS4,但也许您应该研究使用纯javascript计算滚动位置。

据我所知,在大多数移动设备上滚动时都不会执行javascript。有一些变通办法。Iscroll正在使用css技术"transform"。但是在滚动时无法执行javascript。我想平滑滚动算法太贵了。

相关内容

  • 没有找到相关文章

最新更新