固定尺寸div滚动时自动缩放：如何阻止该异常行为？

问题原因 #

滚动页面时，浏览器滚动条的显示或隐藏会改变window.innerWidth/window.innerHeight的数值，触发绑定的resize事件，导致代码重新计算缩放比例，进而让内容再次缩放。

解决方案 #

方案1：使用不受滚动条影响的尺寸属性 #

将window.innerWidth和window.innerHeight替换为document.documentElement.clientWidth和document.documentElement.clientHeight，这两个属性获取的是不含滚动条的窗口可用尺寸，滚动时不会发生变化，避免不必要的resize触发。

修改后的JavaScript代码：

let outer = document.getElementById("outer"),
  wrapper = document.getElementById("wrap"),
  maxWidth = outer.clientWidth,
  maxHeight = outer.clientHeight;
window.addEventListener("resize", resize);
resize();

function resize() {
  let scale,
    width = document.documentElement.clientWidth,
    height = document.documentElement.clientHeight,
    isMax = width >= maxWidth && height >= maxHeight;

  scale = Math.min(width / maxWidth, height / maxHeight);
  outer.style.transform = isMax ? "" : `scale(${scale})`;
  wrapper.style.width = isMax ? "" : `${maxWidth * scale}px`;
  wrapper.style.height = isMax ? "" : `${maxHeight * scale}px`;
  wrapper.style.margin = "0 auto";
}

方案2：固定滚动条显示 #

如果需要保留window.innerWidth的使用，可以给页面body设置固定的垂直滚动条，确保滚动条始终显示，避免因滚动条状态变化导致窗口尺寸波动：

body {
  overflow-y: scroll;
}

额外注意事项 #

• 确保maxWidth和maxHeight仅在初始化时获取一次（当前代码已正确实现），不要在resize函数内重新获取，否则会用缩放后的尺寸覆盖原始固定尺寸，导致后续缩放计算错误。

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