横向滚动条影响布局：如何确保布局一致性？

下面是几种能确保布局稳定的实用方案：

1. 利用scrollbar-gutter实现稳定布局 #

scrollbar-gutter属性已支持横向滚动场景，设置stable both可同时为横、纵向滚动条预留固定空间，无论滚动条是否出现，容器宽度都保持一致：

.table-container {
  scrollbar-gutter: stable both;
  overflow-x: auto;
}

注：该属性需要较新版本浏览器支持，若需兼容旧环境，可搭配其他方案使用。

2. 强制显示横向滚动条 #

将容器的overflow-x设为scroll，让横向滚动条始终处于显示状态，滚动条的占位空间固定存在，就不会因内容长度变化导致布局偏移：

.table-container {
  overflow-x: scroll;
}

缺点是即使内容无需滚动，滚动条也会显示，但能彻底保障布局稳定性。

3. 手动预留滚动条宽度 #

针对不支持scrollbar-gutter的浏览器，可手动给容器添加右侧内边距来占位：

.table-container {
  overflow-x: auto;
  padding-right: 17px; /* 多数浏览器横向滚动条宽度约为17px */
}

若要更精准，可通过JS动态计算滚动条宽度：

function getScrollbarWidth() {
  const scrollDiv = document.createElement('div');
  scrollDiv.style.width = '100px';
  scrollDiv.style.height = '100px';
  scrollDiv.style.overflow = 'scroll';
  scrollDiv.style.visibility = 'hidden';
  document.body.appendChild(scrollDiv);
  const width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  document.body.removeChild(scrollDiv);
  return width;
}

// 给目标容器设置对应内边距
const container = document.querySelector('.table-container');
container.style.paddingRight = `${getScrollbarWidth()}px`;

4. 统一滚动条样式 #

不同浏览器默认滚动条宽度存在差异，通过CSS统一样式可减少这类差异带来的布局波动：

/* WebKit内核浏览器（Chrome、Safari等） */
.table-container::-webkit-scrollbar {
  width: 17px;
  height: 17px;
}
.table-container::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 8px;
}

/* Firefox */
.table-container {
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

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