iOS safari 允许通过固定 div 滚动 body

Posted 2023-02-25

【中文标题】iOS safari 允许通过固定 div 滚动 body

【英文标题】：iOS safari allows scrolling of body through fixed div

【发布时间】：2016-12-31 19:32:20

【问题描述】：

http://jsbin.com/fopiwaluwo/edit?html,css,js

http://output.jsbin.com/fopiwaluwo（全屏输出 - 应在 iPad/ios 模拟器上查看。）

当滚动到可滚动覆盖的底部或顶部时，主体也会滚动。我想在覆盖层（带有副本的白色透明区域）上滚动时禁用正文上的任何滚动。

这是我希望将其应用到的网络应用程序的简化示例。我知道添加 position: fixed 到 body 会禁用滚动但是我不能在现实世界的例子中使用它。欢迎使用 javascript 解决方案。

干杯

【参考方案1】：

只需添加：

<script type="text/javascript">document.ontouchmove=function(event) event.preventDefault(); </script>

瞧，body 不会滚动，但覆盖会滚动 :-) 更新：似乎仅适用于运行 iOS 10 的 iPhone。 不适用于 iPad 或 iOS 9。

【讨论】：

嘿，谢谢你的回答，但不幸的是，这个在固定 div 上也禁用了滚动:(

@Andre - 你是什么意思？我将此添加到您的示例中（就在</head> 之前），并且覆盖滚动（粉红色部分（好的，红色，带有0.8 alpha）和“此处有一些可滚动的副本”）滚动，红色边框保持固定。这不就是你想要达到的吗？

您是在 iOS 模拟器中执行此操作吗？带有内容的 div 也会停止滚动，这不是预期的结果。

在 iPhone 7 模拟器和真正的 iPhone 6s plus（iOS 10）上测试，下载了你的 HTML，并在 </head> 之前添加了我的添加。

@Andre - 你可以在这里测试它：sharkfood.com/test/so，链接只会在几天内。