HTML页面设置overflow:hidden后缩放屏幕再恢复仍出现溢出问题

问题根源 #

1. 小屏状态下页面允许滚动，滚动后留存的scrollTop数值在切回大屏时不会被浏览器自动重置，即便设置了overflow:hidden，已滚动的偏移量仍然会导致内容溢出
2. 用通配符*全局设置overflow属性会干扰所有元素的溢出规则，反而容易引发异常
3. #developedBy节点放在固定高度为100vh的.container外部，大屏状态下额外的节点高度会直接撑高页面

解决方案 #

第一步：修正CSS规则

替换最开头的通配符样式：

/* 原来的* { ... } 替换为以下代码 */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
  height: 100%;
}
/* 全局统一盒模型，避免宽度计算异常 */
* {
  box-sizing: border-box;
}

修改小屏媒体查询中的overflow规则，把* { overflow: auto; }替换为：

html, body {
  overflow: auto;
}

给大屏的.container添加溢出隐藏规则，避免内部绝对定位元素溢出：

@media only screen and (min-width:1071px) {
  .container {
    /* 原有属性保留，添加以下一行 */
    overflow: hidden;
  }
}

第二步：调整HTML结构

把位于.container外部的<h6 id="developedBy">Developed by abcdefg</h6>节点，挪到.container内部的.footer块中，同步调整该节点的margin样式适配布局即可。

第三步：添加窗口变化监听重置滚动位置

在页面中添加以下JS代码，大屏切换时自动回滚到顶部：

window.addEventListener('resize', () => {
  // 匹配你设置的大屏断点
  if (window.innerWidth >= 1071) {
    window.scrollTo(0, 0);
  }
})

做完以上修改后切换屏幕尺寸就不会再出现溢出问题了。

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