如何阻止绝对定位的div滚动时导致页面横向扩展？

问题原因 #

绝对定位元素脱离文档流，当它的left值随滚动不断增大、超出视口宽度时，浏览器会判定页面需要横向滚动空间，从而无限撑开页面宽度，在响应式窄视口下这个问题会更突出。

有效解决方案 #

1. 同时限制根元素横向溢出

仅给body设置overflow-x: hidden不够，需同时给html（根元素）添加该属性，彻底阻断横向溢出触发的页面宽度扩展：

html, body{
  height: 10000px;
  overflow-x: hidden; /* 限制横向溢出 */
}
.box{
  height: 500px;
  width: 500px;
  background: #000;
  position: absolute;
}

2. 限制元素最大横向位移（可选）

从根源上控制元素的偏移范围，避免它过度超出视口：

let box = document.querySelector('.box')

window.addEventListener('scroll', ()=>{
  let value = window.scrollY
  // 计算元素最大可偏移的left值：视口宽度 - 元素自身宽度
  const maxLeft = window.innerWidth - box.offsetWidth
  // 取计算值和最大允许值的较小值，防止元素过度偏移
  box.style.left = Math.min(value*5, maxLeft) + 'px'
})

3. 改用fixed定位（业务允许时）

如果不需要元素基于文档流定位，改用fixed定位（相对视口定位），元素偏移不会影响页面整体宽度：

.box{
  height: 500px;
  width: 500px;
  background: #000;
  position: fixed; /* 替换为fixed */
}

为什么之前的方法无效 #

• 仅给body设overflow:hidden：根元素html的溢出未被限制，浏览器仍会识别到超出元素并撑开宽度；
• 父元素设relative：仅改变绝对定位的参照对象，无法限制元素超出父元素范围后触发的页面宽度扩展；
• 设置max-width：绝对定位元素脱离文档流，max-width无法约束其位移带来的页面宽度变化。

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