避免滚动条引发的页面布局抖动

滚动条的出现有时会引起页面布局的抖动，尤其是当页面从有滚动条到无滚动条（或反之）状态切换时。这种布局抖动会影响用户体验，尤其是在进行页面导航或动态内容加载时。幸运的是，有几种方法可以避免这种情况。

1. 为滚动条留出空间

可以通过CSS为滚动条预留固定的空间，这样即使滚动条出现或消失，页面的内容宽度也不会变化。

html {
  overflow-y: scroll;
}

2. 滚动条宽度补偿

另一种方法是计算滚动条宽度，并在页面布局中相应地进行调整。

body {
  margin-right: calc(100vw - 100%);
}

上述代码段通过100vw（视口宽度）减去100%（页面内容的宽度）来计算滚动条的宽度，并将这个值作为body元素的右边距。这样可以确保即使滚动条出现或消失，页面内容的实际可用宽度也保持不变。

3. 使用现代化布局

使用Flexbox或Grid布局可以帮助更好地管理布局变化，因为这些布局模型更加灵活，能够更好地适应内容的变化。

.container {
  display: flex;
  flex-wrap: wrap;
}

使用Flexbox时，容器可以自动调整其子元素的位置和大小，以适应可用空间的变化。

4. 避免固定高度

尽量避免在元素上使用固定的高度，这样可以防止内容的增加导致滚动条的突然出现。

.element {
  max-height: none;
}

计算滚动条宽度

有时了解滚动条的确切宽度是有益的，尤其是当需要对页面布局进行精细调整时。下面是一个JavaScript函数，它基于上传的图片中的代码计算滚动条的宽度：

function getScrollbarWidth() {
  // 创建一个临时的div元素
  const oDiv = document.createElement('div');
  // 应用样式以确保元素具有宽度和溢出的滚动条
  oDiv.style.cssText = 'width:100px;height:100px;position:absolute;top:-1000px;overflow:hidden;';
  // 将元素添加到DOM中
  document.body.appendChild(oDiv);
  // 计算内部宽度，不包括滚动条
  const w = oDiv.clientWidth;
  // 强制滚动条出现
  oDiv.style.overflowY = 'scroll';
  // 再次计算宽度
  const newW = oDiv.clientWidth;
  // 从DOM中移除元素
  document.body.removeChild(oDiv);
  // 返回两次宽度的差值，即滚动条的宽度
  return w - newW;
}

// 输出滚动条宽度
console.log(getScrollbarWidth());

通过以上步骤，我们可以在不触发页面布局抖动的情况下，优雅地管理滚动条的出现与消失。掌握这些技巧对于提升用户体验和创建专业级的网页应用是至关重要的。

原文链接：https://juejin.cn/post/7340926094613381130 作者：慕仲卿