Question

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

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

它们甚至可以在Windows上的Safari 3上运行。具有讽刺意味的是，如果您不介意破坏现有事件，PC上的每个浏览器都支持window.onload=。但是没有用iPad。

Answer 1

iPhoneOS确实捕获了onscroll个事件，但不是你想象的那样。

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

同样，只有在您停止滚动后，才能用2个手指滚动onscroll。

安装处理程序的常用方法是工作，例如

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

（另见https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html）

Answer 2

对于iOS，您需要使用 touchmove 事件以及滚动事件，如下所示：

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
}

Answer 3

很抱歉为旧帖添加了另一个答案，但我通常使用此代码很好地获得了一个滚动事件（它至少在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的惯性< / p>

-webkit-overflow-scrolling: none;

虽然你可能不得不做经典的

，但你的身体并没有惯性

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

Answer 4

我能够通过iScroll获得这个问题的一个很好的解决方案，感觉有动量滚动和所有https://github.com/cubiq/iscroll github文档很棒，我大多数都遵循它。以下是我实施的详细信息。

<强> HTML：我将内容的可滚动区域包装在iScroll可以使用的一些div中：

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

<强> CSS：我使用Modernizr课程来触摸＆＃34;触摸＆＃34;将我的样式更改仅定位到触摸设备（因为我只是在触摸时实例化iScroll）。

.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：我从iScroll下载中包含iscroll-probe.js，然后如下所示初始化滚动条，其中updatePosition是我对新滚动位置作出反应的函数。

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

您必须使用myScroller立即获取当前位置，而不是查看滚动偏移。这是一个取自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}; 
}

唯一的其他问题偶尔会丢失我试图滚动到的页面的一部分，它会拒绝滚动。每当我更改#wrapper的内容时，我都必须添加对myScroller.refresh（）的一些调用，这解决了问题。

编辑：另一个问题是，iScroll会吃掉所有＆＃34;点击＆＃34;事件。我打开选项让iScroll发出一个＆＃34;点击＆＃34;事件并处理那些而不是＆＃34;点击＆＃34;事件。值得庆幸的是，我没有多少点击滚动区域，所以这不是什么大不了的事。

Answer 5

自从iOS 8发布以来，此问题不再存在。现在，滚动事件也可以在iOS Safari中顺利触发。

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

适用于iPhone / iPad的javascript滚动活动？

5 个答案: