模态框打开时禁用页面滚动的CSS跨浏览器兼容实现方案

既然:has伪类已实现跨浏览器支持，你当前使用的选择器方案完全可行，以下是完整的禁用滚动实现代码：

body:has(dialog.active) {
  overflow: hidden;
  /* 修复iOS Safari下的滚动穿透问题 */
  position: fixed;
  width: 100%;
}

关键说明： #

• overflow: hidden：直接隐藏body的溢出内容，阻止页面滚动
• position: fixed + width: 100%：解决iOS Safari中仅靠overflow: hidden无法完全禁用滚动的问题，避免模态框打开时页面仍能被拖拽滑动

如果需要兼容极少数尚未支持:has的老旧环境，也可以通过JavaScript辅助实现：模态框打开时给body添加.modal-open类，关闭时移除，然后用以下CSS：

body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

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