如何防止 iOS Safari 屏幕底部的滚动事件

Posted 2023-02-24

【中文标题】如何防止 iOS Safari 屏幕底部的滚动事件

【英文标题】：How to prevent scroll event from the bottom of the screen on iOS Safari

【发布时间】：2021-04-16 04:25:04

【问题描述】：

使用 ios safari 时发生来源不明的滚动事件。

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

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

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

是什么导致了这种行为（事件名称）？ 可以在不使用 javascript 的情况下使用此方法防止滚动 额外的 CSS 吗？

更新 1：虽然似乎没有已知的方法来解决这个问题，但强制显示底部一直适用于我的特定用例。

【参考方案1】：

在没有额外 css 的情况下，是否可以通过 Javascript 使用此方法来防止滚动？

我担心答案是否定的。 :(

---

这是我能找到的最有意义的来源：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 漏洞） 更一般地说，仅使用“滚动”搜索未解决的问题会添加许多补充信息，这些信息似乎都得到了否定的答案，遗憾的是，当菜单栏隐藏时，在 iOS Safari 中阻止滚动不起作用。李>

【讨论】：

感谢您的回答。虽然我没有解决该错误的方法，但参考中篇文章让我对正在发生的事情有了很好的了解。如果我找到解决方法或出现任何问题，我会更新问题。

【参考方案2】：

iOS 上的 Safari 具有所谓的 overscoll/bounce 效果。您可以通过在身体上使用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';
);

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

【讨论】：

抱歉，我无法接受您的解决方案。 1. 没用，safari 不给你在同一区域检测这些事件的能力。 2.我不想在组件之外添加任何额外的css，这是我问题的重点，这将创建一个具有副作用的组件，拥有这样的东西真的很糟糕。

“野生动物园无法让您在同一区域检测到这些事件”是什么意思。这是一个工作演示：klaasmaakt.nl/test。据我所知，只有在正文中添加fixed 才能解决过度滚动效果的问题，所以如果你问我，这是唯一的选择......

嘿，请检查@mcy 答案