在全屏 iOS Web 应用程序中部分禁用滚动反弹

Posted 2023-03-14

【中文标题】在全屏 iOS Web 应用程序中部分禁用滚动反弹

【英文标题】：Partially disabling scroll bounce in full screen iOS web app

【发布时间】：2012-07-25 16:58:52

【问题描述】：

谁能帮忙解决以下问题？

我有一个简单的全屏网络应用程序（针对 ios 和移动 safari），它包含一个标题和一个可滚动列表。

我已经申请了：

overflow: scroll;
-webkit-overflow-scrolling: touch;

到可滚动元素，我应用了以下javascript：

document.addEventListener("touchmove", function (e) 
    e.preventDefault();
, false);

var theWrapper = document.getElementById("wrapper");
theWrapper.ontouchmove = function(e)
  console.log(e);
  e.stopPropagation();
  e.stopImmediatePropagation();
    // e.preventDefault();
;

试图防止滚动弹跳发生。

这部分成功是因为如果您尝试从标题滚动，则赠品网络应用程序反弹不会发生，但是如果您将列表滚动到其末端（即，当位于列表顶部时 scrollUp 或当 scrollDown 时在列表的底部）似乎滚动的东西冒了出来，整个应用程序都会滚动反弹。

我在 JS Bin 上做了一个演示，以便您自己体验这种行为（抱歉，仅限 iPhone/iPad - 它可以在桌面浏览器上正常工作*）：

http://jsbin.com/opetom/4/

将演示添加到您的 iPhone 主屏幕以获得最佳效果。

非常感谢您提供的任何帮助。这真的很令人沮丧，我相信这一定是一个普遍的问题。

*实际上，刚刚更新到Mountain Lion 和最新的Safari，行为与现在的移动版Safari 相同。如果您使用“触摸板上的两根手指滚动”，则相同。如果您在列表处于末端时尝试滚动，它会“反弹”。

【参考方案1】：

我手头没有任何可以提供足够好的 webkit 的触控设备，但是您是否尝试过添加“e.cancelBubble = true;”？

或者可以结合使用捕获和气泡阶段事件侦听器以及使用 stopPropagation。

【讨论】：

谢谢@miko。似乎 cancelBubble 已被弃用：MDN - cancelBubble 支持 e.stopPropagation()。无论如何我都试过了，但不幸的是它没有帮助。