我目前使用$(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。我想平滑滚动算法太贵了。