Edge浏览器中设置overflow-y:scroll的div动态添加元素偏移问题咨询

嗨，这个问题我之前也碰到过，确实是Edge浏览器在处理滚动容器布局时的一个小坑！

问题描述 #

你遇到的情况是：在Microsoft Edge浏览器中，给id为container的<div>设置了overflow-y:scroll，但动态添加元素时容器会向下偏移，而Firefox里完全正常。你的测试代码如下：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <title>Test</title> 
  <meta charset="UTF-8" /> 
  <style> 
    body { 
      border: 3px dotted red; 
      position: fixed; 
      width: 100%; 
      height: 100%; 
      display: grid; 
      justify-items: center; 
      align-items: center; 
      overflow: hidden; 
      box-sizing: border-box; 
      margin: 0; 
      padding: 0; 
    } 
  </style> 
</head> 
<body> 
  <div style="height: 95%; border: 2px dotted orange; background-color: blue; overflow: hidden;"> 
    <div id="container" style="overflow-y: scroll; width: 60vmin; height: 95%; background-color: silver;"></div> 
  </div> 
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 
  <script> 
    for (var i = 0; i < 500; i++) { 
      $('#container').append('<div style="border: 1px solid silver;">Hello World!</div>'); 
    } 
  </script> 
</body> 
</html>

原因分析 #

这个问题的核心是Edge和Firefox对滚动容器初始布局的计算逻辑差异：

• 当container初始为空时，Edge没有提前为垂直滚动条预留占位空间，哪怕你已经设置了overflow-y:scroll；
• 当动态添加大量内容后，滚动条突然渲染出来，容器的实际可用高度被压缩，再加上父容器使用了align-items:center的网格布局，容器就会向下偏移来重新居中。
  而Firefox会提前为overflow-y:scroll的容器预留滚动条占位，所以不会出现偏移。

解决方案 #

最直接且优雅的解决方法是使用scrollbar-gutter: stable属性，它能强制浏览器提前为滚动条预留固定的占位空间，彻底避免滚动条切换时的布局跳动。

修改container的样式，添加这个属性即可：

<div id="container" style="overflow-y: scroll; width: 60vmin; height: 95%; background-color: silver; scrollbar-gutter: stable;"></div>

如果需要兼容更老版本的Edge（基于EdgeHTML的旧版），还可以试试这两个备选方案：

• 初始化时给container添加一个高度为0的隐藏元素，让浏览器提前渲染滚动条：

  // 在循环前先加一个占位元素
  $('#container').append('<div style="height:0; visibility:hidden;"></div>');
  

• 给container设置固定的右侧内边距（对应滚动条宽度），比如padding-right: 17px;（这是通用滚动条宽度，不同系统可能略有差异）

验证效果 #

修改后重新运行代码，Edge浏览器里的container就不会再出现向下偏移的问题，和Firefox的表现完全一致了。

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