JavaScript滚动事件的iPhone / iPad?

我似乎无法捕捉iPad上的滚动事件。 这些工作都没有,我做错了什么?

window.onscroll=myFunction; document.onscroll=myFunction; window.attachEvent("scroll",myFunction,false); document.attachEvent("scroll",myFunction,false); 

他们都可以在Windows上使用Safari 3。 具有讽刺意味的是,PC上的每一个浏览器都支持window.onload=如果你不介意破坏现有的事件。 但是,没有去iPad上。

iPhoneOS确实捕获了onscroll事件,除了不像您预期​​的那样。

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

同样,只有在停止滚动之后,才能滚动2个手指点击滚动。

安装该处理程序的常用方法工作,例如

 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 } 

对不起,添加一个旧的post的另一个答案,但我通常使用这个代码(至less在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; 

尽pipe你可能需要做经典的作品,但是你的元素并不是惯性的

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

我能够得到一个伟大的解决scheme与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,然后如下所示初始化滚动条,其中up​​datePosition是我的函数,可以响应新的滚动位置。

 # 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(一个超级有用的文章,但现在有点过时了);

 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发出一个“tap”事件,并处理这些事件而不是“click”事件。 谢天谢地,我不需要在滚动区域点击太多,所以这不是什么大问题。