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

【问题标题】：Overflow hidden issue with double scrolling on iOSiOS上双滚动的溢出隐藏问题
【发布时间】：2018-09-25 10:04:21
【问题描述】：

问题是我有一个包含大量内容和一个带有可滚动内容的模式的正文（它无法定位固定，因为它会导致当前项目出现错误），问题是如果我在 iOS 上将溢出设置为隐藏没有任何反应。

就我而言，将height: 100vh 和overflow: hidden 设置为class="parent" 不起作用。

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

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

如果你们有一些想法/参考/解决问题的方法在这里发布，我很感激，谢谢。

这里是sn-p https://codepen.io/anon/pen/zJQoJR

<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>

【问题讨论】：

为什么你的容器孩子是position: fixed而不是position: absolute？
@Sam 因为它必须是你能看到的唯一东西（要粘住）。

标签： html ios css overflow hidden

【解决方案1】：

通过将其添加到您的 css 中，我得到了很好的结果：

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

要在您的 iOS 设备上使模态“有弹性”，请将您的 .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

【讨论】：

我会将此标记为最有用的解决方案，直到它在 WebKit 中得到修复。谢谢！
我不认为这是一个错误。只能使用 position: fixed 来禁用弹跳效果。

【解决方案2】：

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

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

【讨论】：

这可以帮助 99% 有相同问题的开发人员，问题是在我的情况下，它将内容从父级带到顶部（类似于 scrollTop = 0 并且与 position:fixed 相同） ; top: 0 to body) 这不行。