时间戳

首页 > 解决方案 > 溢出：隐藏在 ios Safari 中不起作用

jquery - 溢出：隐藏在 ios Safari 中不起作用

问题描述

将溢出隐藏设置为html, body使用 jquery 或 css 在 ios safari 中不起作用，但适用于 mac 和所有其他浏览器上的 safari。

我尝试在这里寻找答案：Overflow-x:hidden 不会阻止内容在移动浏览器中溢出。答案解释了使用包装器 divposition: relative并添加overflow: hidden到该 div。这个解决方案对我不起作用。

还有一个答案说要使用position: fixed，但我遇到的问题是我需要toggleClass在溢出之间切换才能使弹出消息起作用，但是当我使用 jquery 应用它时，屏幕一直滚动到顶部。

我还尝试在弹出窗口后面添加一个全宽和全高的透明position: fixed叠加层，但奇怪的是，背景中的 body/html 仍然可以在叠加层中滚动。

通过单击此处的右下角共享按钮，可以在我的网站上在响应模式下看到该问题：https ://ph4ntom.tech/downloads/wallpapers/wallpapers.html

是否有一种工作方法可以在 ios Safari 中临时使用 jquery/css/html 隐藏/禁用覆盖？

我没有包含整个代码，因为它会使问题变得更长和更混乱，而且我不认为包含代码是必要的，因为我的问题只要求在使用overflow: hiddenonbody, html不起作用的 ios Safari 中隐藏溢出或禁用滚动的方法。请阅读：https ://stackoverflow.com/help/how-to-ask

感谢您的帮助 ：）

标签： jqueryhtmlcsssafarioverflow

解决方案

$("button").click(function() {
  $("body").toggleClass("overflow-hidden")
})
.overflow-hidden {
  height: 100vh;
  overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click</button>

推荐阅读