html 滚动条出现页面抖动

当滚动条出现时，页面的宽度会发生变化，导致页面重新计算布局，从而出现抖动的现象。这是因为滚动条的宽度占用了页面的一部分空间，使得页面的可视区域变窄，导致页面重新布局。

为了避免滚动条出现时页面的抖动，可以通过以下方法解决：

使用 CSS overflow-y: scroll 属性强制始终显示垂直滚动条，即使内容不足以滚动。这样可以确保页面始终有一个固定的滚动条占位，从而避免页面布局的变化。

body {
  overflow-y: scroll;
}

使用 JavaScript 在页面加载完成后，检查页面内容的高度是否超过视窗的高度，如果不超过则强制添加一个垂直滚动条。这样可以确保页面始终有一个固定的滚动条占位。

window.addEventListener('load', function() {
  var bodyHeight = document.body.clientHeight;
  var windowHeight = window.innerHeight;
  
  if (bodyHeight <= windowHeight) {
    document.body.style.overflowY = 'scroll';
  }
});

以上方法可以确保页面始终有一个固定的滚动条占位，从而避免滚动条出现时页面的抖动现象