IPhone/iPad 的 javascript 滚动事件？

我似乎无法在 iPad 上捕捉滚动事件。 这些都不管用，我做错了什么？

window.onscroll=myFunction;


document.onscroll=myFunction;


window.attachEvent("scroll",myFunction,false);


document.attachEvent("scroll",myFunction,false);

They all work even on Safari 3 on Windows. Ironically, EVERY browser on the PC supports window.onload= if you don't mind clobbering existing events. But no go on iPad.

250379 次浏览
小开
最佳答案

The iPhoneOS does capture onscroll events, except not the way you may expect.

单指平移不会生成任何事件，直到用户停止平移ーー当页面停止移动并重新绘制时会生成 onscroll事件ーー如图6-1所示。

类似地，用两个手指滚动只有在你停止滚动之后才会触发 onscroll。

通常安装处理程序的方法是可行的。

window.addEventListener('scroll', function() { alert("Scrolled"); });
// or
$(window).scroll(function() { alert("Scrolled"); });
// or
window.onscroll = function() { alert("Scrolled"); };
// etc

(See also https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html)

小开

对于 iOS，你需要像这样使用 触摸动作事件和 卷轴事件:

document.addEventListener("touchmove", ScrollStart, false);
document.addEventListener("scroll", Scroll, false);


function ScrollStart() {
//start of scroll event for iOS
}


function Scroll() {
//end of scroll event for iOS
//and
//start/end of scroll event for other browsers
}
小开

Sorry for adding another answer to an old post but I usually get a scroll event very well by using this code (it works at least on 6.1)

element.addEventListener('scroll', function() {
console.log(this.scrollTop);
});


// This is the magic, this gives me "live" scroll events
element.addEventListener('gesturechange', function() {});

这对我很有用。它唯一没有做的事情就是为滚动的减速提供一个滚动事件(一旦减速完成，你就会得到一个最终的滚动事件，随你怎么处理它。)但是如果你通过这样做来消除 css 的惯性

-webkit-overflow-scrolling: none;

You don't get inertia on your elements, for the body though you might have to do the classic 

document.addEventListener('touchmove', function(e) {e.preventDefault();}, true);
小开

我能够得到一个伟大的解决方案，这个问题与 iScroll，动量滚动的感觉和一切 https://github.com/cubiq/iscroll的 github 文档是伟大的，我大部分跟随它。这是我的实现的细节。

HTML: 我用一些 div 包装了内容的可滚动区域，iScroll 可以使用:

<div id="wrapper">
<div id="scroller">
... my scrollable content
</div>
</div>

CSS: I used the Modernizr class for "touch" to target my style changes only to touch devices (because I only instantiated iScroll on touch).

.touch #wrapper {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.touch #scroller {
position: absolute;
z-index: 1;
width: 100%;
}

约翰逊: 我加入了等轴探测器。Js，然后初始化滚动器，如下所示，其中 updatePosition 是对新滚动位置作出反应的函数。

# coffeescript
if Modernizr.touch
myScroller = new IScroll('#wrapper', probeType: 3)
myScroller.on 'scroll', updatePosition
myScroller.on 'scrollEnd', updatePosition

现在必须使用 myScroll 来获取当前位置，而不是查看滚动偏移量。下面是一个取自 http://markdalgleish.com/presentations/embracingtouch/的函数(一篇非常有用的文章，但是现在有点过时了)

function getScroll(elem, iscroll) {
var x, y;


if (Modernizr.touch && iscroll) {
x = iscroll.x * -1;
y = iscroll.y * -1;
} else {
x = elem.scrollTop;
y = elem.scrollLeft;
}


return {x: x, y: y};
}

唯一的另一个问题是，我偶尔会丢失一部分页面，我试图滚动到，它会拒绝滚动。每当我更改 # 包装器的内容时，都必须添加一些对 myScroller.refresh ()的调用，这就解决了问题。

编辑: 另一个陷阱是 iScroll 吞噬了所有的“点击”事件。我打开选项，让 iScroll 发出一个“点击”事件，并处理这些事件，而不是“点击”事件。谢天谢地，我不需要太多的点击在滚动区域，所以这不是一个大问题。

小开

自从 iOS8出来以后，这个问题就不再存在了。滚动事件现在在 iOSSafari 中也可以平稳地触发。

因此，如果注册 scroll事件处理程序并在该事件处理程序中检查 window.pageYOffset，那么一切都很正常。

小开

在对 ios 进行了一些测试之后，我发现如果你不担心在桌面上延迟120ms 的话，这就是 ios 和桌面应该采用的方式。非常有效。

let isScrolling;
document.addEventListener("scroll", () => {
// Clear our timeout throughout the scroll
window.clearTimeout( isScrolling );


// Set a timeout to run after scrolling ends
isScrolling = setTimeout(function() {


// Run the callback
console.log( 'Scrolling has stopped.' );


}, 120);
});

提交答案