Question

问题是我有一个主体（由于它导致当前项目的错误，所以无法固定放置）具有很多内容，并且内部有可滚动内容的模态，问题是在iOS上，如果我将溢出变为隐藏状态。

就我而言，将height: 100vh和overflow: hidden设置为class="parent"无效。

我尝试了不同的方法并尝试了不同的技巧来解决此问题，但仍未解决，在这里我也看到了不同的方法，只是针对不同的情况。

我也在寻找溢出隐藏的替代方案，但是什么也没找到...

如果你们有一些想法/参考/解决问题的方法，请将它发布在这里，谢谢，

以下是代码段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>

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设备上创建模式“有弹性”，请将.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 */
}

以下是有关代码笔的演示：https://codepen.io/anon/pen/mzJXPJ

iOS上的双重滚动显示隐藏的问题

2 个答案: