移动端网站设置overflow:hidden后仍出现意外滚动条问题排查

1. 环境设置 #

CSS 样式 #

<!-- styles -->
<style>
  body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    overflow: hidden;
  }

  .square {
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>

HTML 结构 #

<!-- body -->
<body>
  <div class="square"></div>
</body>

2. 触发问题的操作 #

为.square添加以下CSS属性：

position: absolute;
left: 100%;
top: 0;

3. 问题现象与测试情况 #

• 桌面视图：表现正常，页面空白，无滚动条且无法滚动
• DevTools设备工具栏（快捷键ctrl + shift + m）/移动端：页面可向右滚动看到红色方块，同时支持向下滚动（即使body已设置overflow:hidden）
• 有效替代方案：将left: 100%改为right: 100%，或使用transform: translateX(100%)，页面恢复正常表现

受影响的浏览器 #

• Edge（设备工具栏模式）
• Samsung Internet
• Chrome（移动端）
• BrowserStack测试显示Chrome v90、101、105版本均存在该问题

测试版本信息 #

• Chrome桌面正式版：120.0.6099.130（64位，稳定通道）
• Chrome移动正式版：120.0.6099.144（64位）

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