移动端Safari中overscroll-behavior-y: contain在非滚动遮罩上失效

需求与痛点 #

打开模态框、侧边栏等遮罩元素时，需要阻止body元素滚动，计划使用原生CSS属性overscroll-behavior替代老旧JS方案，但移动端Safari存在特殊失效场景：当遮罩元素内容较短、自身不可滚动时，即使设置了overscroll-behavior-y: contain，用户滑动遮罩区域仍会带动body滚动。

解决方案 #

核心思路是让Safari将遮罩元素识别为可滚动容器，即使内容不足以触发滚动。具体操作：

• 给遮罩元素添加min-height: 100vh（或略大于视口高度的值），确保容器高度覆盖整个视口
• 保留遮罩元素的overflow-y: scroll和overscroll-behavior-y: contain属性
• 配合状态类（如data-modal-active）给html和body设置overflow: hidden、overscroll-behavior: none，双重保险

完整代码示例 #

HTML #

<button id="btn">打开/关闭模态框</button>
<main>
    <!-- 大量填充内容，模拟可滚动的body -->
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo aliquam expedita eius officiis, fugiat velit ipsum dolorem ullam eaque veritatis quaerat facere iste harum nesciunt. Magnam officia animi minima porro.</p>
</main>
<aside class="modal">
    Here is a fantastic modal. It has things in:
    <div class="thing">thing 1</div>
    <div class="thing">thing 2</div>
    <div class="thing">thing 3</div>
</aside>

CSS #

html, body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

/* 模态框激活时的全局滚动锁定 */
html[data-modal-active="true"] {
    overscroll-behavior: none;
    overflow: hidden;
    touch-action: none;
    -webkit-overflow-scrolling: auto;
}

html[data-modal-active="true"] body {
    overscroll-behavior: none;
    overflow: hidden;
    touch-action: none;
    -webkit-overflow-scrolling: auto;
}

/* 模态框样式 - 核心修复Safari问题 */
.modal {
    position: fixed;
    z-index: 100;
    background-color: #777;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh; /* 强制容器高度覆盖视口，让Safari识别为可滚动容器 */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;

    overflow-y: scroll; /* 保留滚动属性 */
    overscroll-behavior-y: contain; /* 阻止滚动传递到父容器 */
}

html[data-modal-active="true"] .modal {
    display: flex;
}

.thing {
    padding: 10px;
    margin: 5px 0;
    background: #fff;
    width: 80%;
    text-align: center;
}

JavaScript #

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
    const currentState = document.documentElement.getAttribute("data-modal-active") === "true";
    document.documentElement.setAttribute("data-modal-active", currentState ? "false" : "true");
});

说明 #

• min-height: 100vh确保模态框容器高度覆盖整个视口，即使内容不足，Safari也会将其视为可滚动容器，overscroll-behavior就能正常阻止滚动传递
• 保留overflow-y: scroll和overscroll-behavior-y: contain，确保模态框自身滚动时不会触发body滚动
• html/body的状态类样式作为双重保险，进一步锁定全局滚动

内容的提问来源于stack exchange，提问作者Fred K