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

Question

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

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

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

Answer 1

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)

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

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() {});

And that works for me. Only thing it doesn't do is give a scroll event for the deceleration of the scroll (Once the deceleration is complete you get a final scroll event, do as you will with it.) but if you disable inertia with css by doing this

-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);

Answer 4

我能够通过iScroll得到一个很好的解决方案来解决这个问题,感觉有动量滚动和所有内容https://github.com/cubiq/iscroll github doc非常好,而且我大部分都遵循它.这是我实施的细节.

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 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发出"点击"事件并处理这些事件而不是"点击"事件.值得庆幸的是,我不需要在滚动区域点击太多,所以这不是什么大问题.