iPhone/iPad 的 javascript 滚动事件?

IT技术 javascript iphone ipad scroll onscroll
2021-02-05 15:29:35

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

window.onscroll=myFunction;

document.onscroll=myFunction;

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

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

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

5个回答

iPhoneOS 确实会捕获onscroll事件,但不是您所期望的方式。

单指平移不会产生任何事件,直到用户停止平移——onscroll当页面停止移动和重绘时生成一个事件——如图 6-1 所示。

同样,onscroll只有在您停止滚动后才能使用 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

谢谢,这迫使我进一步看问题。真正的答案是检测 iphone/ipad 上的视口顶部仅适用于 window.pageYOffsetdocument.body.scrollTop||document.documentElement.scrollTop 不像现有的所有其他浏览器/硬件。
2021-03-12 15:29:35
直接覆盖 window.onscroll 是不好的做法。添加事件侦听器会更好。使用 window.addEventListener('scroll', function (){ alert('scrolled!'); });
2021-03-20 15:29:35
Safari(可能还有其他人)改为在 iOS 8 中使用 WKWebView。Chrome 和 Cordova 仍然使用 UIWebView,因此它们仍然存在未发出连续滚动事件的问题。不过,Cordova 有一个 WKWebView 插件。
2021-03-20 15:29:35
@ck_ 不幸的是,IPADwindow.pageYOffset在减速阶段不会更新,只有在滚动完成时才会更新。
2021-03-29 15:29:35
嗯.. 实际上,window.onscroll 现在一直在我的 ipad 上运行,平移时和平移后,同时减速。有什么改变吗?
2021-04-03 15:29:35

对于 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
}
此事件仅在用户主动滚动时触发,在动量滚动的减速阶段不会触发。
2021-03-18 15:29:35
已经三年了。我无法在减速期间实时更新滚动位置。我应该如何编写类似地图的应用程序????
2021-03-26 15:29:35
我更改了代码以包含 iOS 的结束滚动检测代码
2021-03-30 15:29:35
请注意,这不提供对滚动阶段期间的访问
2021-04-05 15:29:35
您可能还想为“touchend”添加一个监听器,它的作用类似于在桌面上滚动。
2021-04-06 15:29:35

很抱歉为旧帖子添加另一个答案,但我通常使用此代码可以很好地获得滚动事件(它至少在 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);
因为downvoting既简单又快捷。:/
2021-03-13 15:29:35
gesturechange事件是非标准的,仅受 Safari 支持:developer.mozilla.org/en-US/docs/Web/Events/gesturechange
2021-03-22 15:29:35
根据作者的说法,答案始终是“有效的”......没有人发布故意无效的答案。但是,是的,他们应该解释为什么他们投反对票。
2021-03-26 15:29:35
为什么要对有效答案投反对票而不发表评论来解释它的问题?
2021-03-29 15:29:35

我能够用 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 是我对新滚动位置做出react的函数。

# 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该事件处理程序内部,则一切正常。

它确实存在于某些用例中,例如使用 Cordova。developer.telerik.com/featured/...
2021-04-05 15:29:35
我的经验是,这仍然是 2019 年当前 iOS 设备的问题。
2021-04-06 15:29:35