如何在 iOS Safari 上阻止屏幕底部的滚动事件

Question

使用 iOS safari 时发生滚动事件，来源不明。

重现问题您可以使用此 link 来探索问题的最小示例。

https://codesandbox.io/s/frosty-pike-7z6v9?file=/src/styles.css&resolutionWidth=444&resolutionHeight=649

使用 iphone，尝试滚动直到摆脱 safari 底部导航栏，然后在屏幕底部边缘的非滚动红色区域滚动。

是什么导致了这种行为（事件名称）？
使用此方法可以防止滚动 Javascript 没有额外 css ?

更新 1：虽然看起来没有解决此问题的已知方法，但始终强制显示底部确实适用于我的特定用例。

Answer 1

iOS 上的 Safari 具有 so-called overscoll/bounce 效果。您可以通过在 body 上使用 position:fixed 来消除影响。缺点是底部导航栏又出现了，不过至少下面的代码可以防止红色区域的滚动

在您的 css 中，设置 body 的宽度：

body {
  font-family: sans-serif;
  width:100vw;
}

然后在你 javascript 中，在 touchstart 上添加 position:fixed，在 touchend 上删除它，像这样：

document
.getElementById("noScrollArea")
.addEventListener("touchstart", (e) => {
    e.preventDefault()

    var height = document.body.clientHeight;
    document.body.style.height = height + 'px';
    document.body.style.position = 'fixed';
});
document
.getElementById("noScrollArea")
.addEventListener("touchend", (e) => {
    e.preventDefault();
    document.body.style.height = 'initial';
    document.body.style.position = 'initial';
});

我希望这能帮助您朝着正确的方向前进...

Answer 2

Can scrolling be prevented using this method with Javascript without extra css?

恐怕答案是否定的。 :(

这是我能找到的最有意义的来源：https://bugs.webkit.org/show_bug.cgi?id=189586（~2.5 年前）

在此源中，请参阅“级别 6：iOS Safari 受限浏览器区域”部分：https://medium.com/turo-engineering/ios-mobile-scroll-in-web-react-1d92d910604b

另一个：https://benfrain.com/the-ios-safari-menu-bar-is-hostile-to-web-apps-discuss/

body-scroll-lock 库中问题的引用：

https://github.com/willmcpo/body-scroll-lock/issues/211#issuecomment-761564904
https://github.com/willmcpo/body-scroll-lock/issues/82（我发现 webkit 错误的地方）
更一般地说，只是用“scroll”搜索未解决的问题会添加很多补充信息，所有这些信息似乎都回到了否的答案，遗憾的是防止滚动在 iOS Safari 中不起作用当菜单栏已隐藏。

如何在 iOS Safari 上阻止屏幕底部的滚动事件

How to prevent scroll event from the bottom of the screen on iOS Safari

javascript

scroll

mobile-safari