时间戳

首页 > 解决方案 > 无法通过溢出停止滚动：仅在 ios 设备上隐藏

ios - 无法通过溢出停止滚动：仅在 ios 设备上隐藏

问题描述

我在整个屏幕上使用弹出窗口。当弹出窗口打开时，我将 body 和 html CSS 设置为溢出：隐藏并防止屏幕滚动。在所有浏览器中都可以正常工作，并且在 android 设备上也可以，但问题出在 iOS 设备上。我无法停止在 ios 设备上滚动。

<html style="overflow: hidden;">
<body style="overflow: hidden;">
<div class="popup" style="position: fixed;">
</div>
</body>
</html>

我需要干净的 CSS 解决方案。我已经尝试添加位置：相对，位置：固定但它不起作用。

有什么解决办法吗？

标签： ioscss

解决方案

几天前我遇到了同样的问题，我终于想出了这个。

好吧，有一个非常简单的解决方案可以解决这个问题......您所要做的就是将该元素设置为具有相对位置。例如，如果您要指定 body 隐藏水平滚动条，您会希望在样式表中包含以下 CSS：

body {
  position:relative;
  overflow:hidden;
}

或者

如果上述方法不起作用，另一种方法是添加 jQuery

我们可以通过使用类似这样的东西来防止刷卡：

$('body').bind('touchmove', function(e){e.preventDefault()});

并重新允许再次滑动（即当菜单或全屏模式关闭时）：

$('body').unbind('touchmove');

希望这可以帮助你:)

推荐阅读