iPhone / iPad的javascript滚动事件？

iPhoneOS 确实捕获了 onscroll 事件，但与您可能期望的方式不同。

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

同样，只有在您停止滚动后，用两根手指滚动才会触发 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）

---

对于 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
}

---

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

你不会对你的元素产生惯性，尽管你可能不得不做经典的身体

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

---

我能够通过 iScroll 获得一个很好的解决这个问题的方法，具有动量滚动的感觉和一切https://github.com/cubiq/iscroll github 文档很棒，我主要关注它。这是我的实现细节。

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

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

CSS：我将 Modernizr 类用于“触摸”，将我的样式更改仅针对触摸设备（因为我只在触摸时实例化 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 吃掉了所有的“点击”事件。我打开了让 iScroll 发出“点击”事件并处理这些事件而不是“点击”事件的选项。谢天谢地，我不需要在滚动区域点击太多，所以这没什么大不了的。

---

自从 iOS 8 出来后，这个问题就不再存在了。现在，滚动事件也可以在 iOS Safari 中顺利触发。

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

---