iOS 上双滚动的溢出隐藏问题

Question

问题是我有一个内容很多的正文（它不能定位固定，因为它会导致当前项目出现错误）和一个里面有可滚动内容的模态，问题是 iOS 如果我将溢出设置为隐藏则什么也不会发生。

在我的例子中，将 height: 100vh 和 overflow: hidden 设置为 class="parent" 无效。

我尝试了不同的方法并尝试了不同的黑客来解决这个问题，但没有解决任何问题我在这里看到了不同的方法，但适用于不同的情况。

我也在寻找溢出隐藏的替代品，但还没有找到...

如果你们有一些ideas/refs/a解决它的方法post在这里我很感激，谢谢。

<body class="modal-open">
    <div class="parent">
        <p>Body scrollable content</p>
        <div class="container-child">
            <div class="child">
                <p>Modal scrollable content</p>
            </div>
        </div>
    </div>
</body>

Answer 1

将溢出隐藏在您的 html 标签上可能会有所帮助：

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden; 
}

Answer 2

通过将此添加到您的 css:

，我得到了很好的结果

body.modal-open > .parent {
    position: fixed;
    overflow: hidden;
    height: 100%;
}

要在您的 iOS 设备上制作模态 'bouncy'，请将您的 .container-child css 更改为：

.container-child {
    position: fixed;
    background-color: rgba(0,0,0,0.4);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    -webkit-overflow-scrolling: touch; /* <-- added */
}

这是 codepen 上的演示：https://codepen.io/anon/pen/mzJXPJ

iOS 上双滚动的溢出隐藏问题

Overflow hidden issue with double scrolling on iOS

html

ios

css

overflow

hidden