窗口大小调整时如何保持滚动内容位置且内部盒子使用vw单位？

问题根因 #

你遇到的错位问题本质是浏览器滚动偏移量以固定像素值存储，调整窗口大小时，所有vw单位换算的实际像素会同步缩放（容器宽度、子元素宽度、总可滚动宽度都会按比例变化），但原有scrollLeft的像素值不会自动按比例适配，就会出现滚动位置偏移甚至展示空白的问题。

解决方案 #

以下两种方案都可以在保留内部盒子vw单位设置的前提下解决问题：

方案1：纯CSS滚动捕捉（适配现代浏览器，无额外代码）

修改原有CSS，新增滚动捕捉规则即可：

.box {
  width: 30vw;
  height: 12vw;
  border: 0.1vw solid black;
  
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  overflow-y: hidden;
  /* 新增规则 */
  scroll-snap-type: x proximity;
}

.inner-box {
  margin: 1vw;
  min-width: 7vw;
  height: 7vw;
  border: 0.1vw solid black;
  /* 新增规则 */
  scroll-snap-align: start;
}

原理是启用滚动捕捉能力，窗口大小变化后浏览器会自动将滚动位置吸附到最近的子元素起始位置，不会出现偏移到空白区域的问题。

方案2：JS动态校正（兼容性更强，100%解决偏移问题）

添加少量JS代码，在窗口调整时按滚动比例自动校正偏移量：

const scrollBox = document.querySelector('.box')
let scrollRatio = 0

// 滚动时实时记录当前滚动比例
scrollBox.addEventListener('scroll', () => {
  const maxScroll = scrollBox.scrollWidth - scrollBox.clientWidth
  scrollRatio = maxScroll === 0 ? 0 : scrollBox.scrollLeft / maxScroll
})

// 窗口大小变化时按比例重置滚动位置
window.addEventListener('resize', () => {
  const maxScroll = scrollBox.scrollWidth - scrollBox.clientWidth
  scrollBox.scrollLeft = scrollRatio * maxScroll
})

该方案完全不改动原有的vw单位设置，不管窗口怎么调整，滚动位置都会和调整前的比例完全一致，不会出现任何错位。

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