CSS 滚动条装订线：`scrollbar-gutter: stable` 防止弹窗出现时的页面抖动 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

CSS 滚动条装订线：`scrollbar-gutter: stable` 详解：防止弹窗出现时的页面抖动

各位同学，大家好！今天我们来深入探讨一个看似细微，却对用户体验影响颇大的 CSS 属性：scrollbar-gutter。特别是当涉及到弹窗（modal）出现时，它如何帮助我们避免页面抖动的问题。

问题的根源：滚动条的出现与消失

在很多网页设计中，当页面内容高度超过视口高度时，浏览器会自动显示滚动条。滚动条占据了一定的宽度，通常是十几个像素。当页面内容较少，不需要滚动条时，滚动条区域则为空白。

现在，假设你有一个页面，初始状态下没有滚动条。这时，你点击一个按钮，弹出一个 modal 窗口。这个 modal 窗口可能会导致页面整体内容高度增加，从而触发滚动条的出现。

问题就出在这里： 滚动条突然出现，会“挤压”页面内容，导致页面向左偏移，产生我们所说的“抖动”。这对于用户来说，是一种非常不好的体验，会让人感到页面不稳定、不流畅。

更糟糕的是，如果 modal 窗口关闭，滚动条消失，页面又会向右偏移，再次抖动。

`scrollbar-gutter` 的作用：预留滚动条空间

scrollbar-gutter 属性正是为了解决这个问题而诞生的。它的作用是：强制浏览器为滚动条预留空间，即使当前页面内容不需要滚动条。

这样，即使 modal 窗口弹出，导致滚动条出现，页面内容也不会因为滚动条的出现而被“挤压”，从而避免了抖动。

`scrollbar-gutter` 的语法和取值

scrollbar-gutter 属性的语法很简单：

scrollbar-gutter: auto | stable | both | inherit | initial | revert | revert-layer | unset;

下面我们逐一解释这些取值的含义：

auto (默认值): 浏览器自行决定是否为滚动条预留空间。通常，只有当页面内容需要滚动时，才会显示滚动条。
stable: 始终为滚动条预留空间，即使当前页面内容不需要滚动条。这是我们用来解决页面抖动问题的关键取值。
both: 在页面的两侧都预留滚动条空间。这个取值比较少用，主要用于某些特殊的布局需求。
inherit: 从父元素继承 scrollbar-gutter 属性的值。
initial: 将 scrollbar-gutter 属性设置为浏览器的初始值 (通常是 auto)。
revert: 将 scrollbar-gutter 属性设置为用户代理样式表中的值。
revert-layer: 将 scrollbar-gutter 属性设置为来自之前的 cascade layer 的值。
unset: 如果父元素定义了 scrollbar-gutter 属性，则继承该值；否则，使用 initial 值 (auto)。

实际应用：代码示例

让我们通过一个具体的例子来演示 scrollbar-gutter: stable 的用法。

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>scrollbar-gutter Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container">
    <h1>Welcome to My Page</h1>
    <p>This is some content on the page.</p>
    <button id="openModal">Open Modal</button>
  </div>

  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>This is the modal content.  It may be long enough to cause a scrollbar to appear.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS (style.css):

body {
  font-family: sans-serif;
  /* 关键代码：始终为滚动条预留空间 */
  scrollbar-gutter: stable;
}

.container {
  padding: 20px;
}

.modal {
  display: none; /* 初始状态下隐藏 modal */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 允许 modal 内容滚动 */
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

JavaScript (script.js):

// 获取 modal 元素
var modal = document.getElementById("myModal");

// 获取打开 modal 的按钮
var btn = document.getElementById("openModal");

// 获取关闭 modal 的 <span> 元素
var span = document.getElementsByClassName("close")[0];

// 点击按钮时，打开 modal
btn.onclick = function() {
  modal.style.display = "block";
}

// 点击 <span> (x) 时，关闭 modal
span.onclick = function() {
  modal.style.display = "none";
}

// 点击 modal 以外的区域时，关闭 modal
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

在这个例子中，我们为 body 元素设置了 scrollbar-gutter: stable。这样，即使页面初始状态下没有滚动条，浏览器也会为滚动条预留空间。当点击 "Open Modal" 按钮，弹出 modal 窗口，并且 modal 窗口的内容足够长，导致滚动条出现时，页面也不会发生抖动。

不使用 scrollbar-gutter: stable 的情况:

如果我们将 CSS 中的 scrollbar-gutter: stable; 注释掉，或者将其设置为 scrollbar-gutter: auto;，再次运行代码，你会发现，当 modal 窗口弹出时，页面会明显向左抖动一下。这就是因为滚动条的出现“挤压”了页面内容。

`scrollbar-width` 属性：控制滚动条宽度

与 scrollbar-gutter 相关的还有一个属性：scrollbar-width。这个属性允许你控制滚动条的宽度。

它的语法如下：

scrollbar-width: auto | thin | none;

auto (默认值): 浏览器自行决定滚动条的宽度。
thin: 使用更细的滚动条。
none: 隐藏滚动条。

注意: scrollbar-width: none 只是隐藏了滚动条，但滚动条的占位空间仍然存在。这意味着，即使你设置了 scrollbar-width: none，页面仍然不会因为滚动条的出现和消失而抖动。但是，隐藏滚动条可能会影响用户的操作体验，所以要谨慎使用。

`scrollbar-color` 属性：自定义滚动条颜色

虽然与页面抖动没有直接关系，但 scrollbar-color 属性也值得一提。它可以让你自定义滚动条的颜色。

它的语法如下：

scrollbar-color: <color> <color>;

第一个 <color> 值定义滚动条的轨道颜色，第二个 <color> 值定义滚动条滑块的颜色。

例如：

scrollbar-color: #eee #333;

这段代码会将滚动条的轨道颜色设置为浅灰色 (#eee)，滑块颜色设置为深灰色 (#333)。

浏览器兼容性

scrollbar-gutter 的浏览器兼容性如下：

浏览器	支持情况
Chrome	支持
Firefox	支持
Safari	支持
Edge	支持
Internet Explorer	不支持

scrollbar-width 和 scrollbar-color 的兼容性与 scrollbar-gutter 类似，大部分现代浏览器都支持。

何时使用 `scrollbar-gutter: stable`

以下是一些建议的使用场景：

页面包含 modal 窗口: 这是最常见的应用场景，可以有效防止 modal 窗口弹出时页面抖动。
页面内容动态变化: 如果页面内容会根据用户的操作动态变化，并且这种变化可能会导致滚动条的出现和消失，那么使用 scrollbar-gutter: stable 可以保证页面稳定。
需要高度一致的用户体验: 为了给用户提供更加流畅、稳定的体验，即使页面内容很少，你也可以始终使用 scrollbar-gutter: stable。

替代方案

虽然 scrollbar-gutter: stable 是解决页面抖动问题的最佳方案，但在一些特殊情况下，你也可以考虑以下替代方案：

使用固定宽度的容器: 为页面内容设置一个固定宽度的容器，这样滚动条的出现就不会影响容器的宽度，从而避免页面抖动。但这种方法可能会导致页面在不同分辨率下的显示效果不一致。
JavaScript 监听滚动条事件: 可以使用 JavaScript 监听滚动条的出现和消失事件，然后动态调整页面布局，以避免抖动。但这种方法比较复杂，并且可能会影响性能。

示例：使用 JavaScript 监听滚动条

以下是一个使用 JavaScript 监听滚动条事件的示例代码：

function handleScrollbar() {
  const hasScrollbar = document.documentElement.scrollHeight > document.documentElement.clientHeight;

  if (hasScrollbar && !document.body.classList.contains('has-scrollbar')) {
    document.body.classList.add('has-scrollbar');
  } else if (!hasScrollbar && document.body.classList.contains('has-scrollbar')) {
    document.body.classList.remove('has-scrollbar');
  }
}

// 初始检查
handleScrollbar();

// 监听 resize 事件
window.addEventListener('resize', handleScrollbar);

CSS:

body {
  margin: 0;
}

.container {
  width: 100%;
  /* 其他样式 */
}

body.has-scrollbar .container {
  /* 根据实际情况调整，例如，添加 padding-right */
  padding-right: 15px; /* 滚动条宽度 */
}

这个示例中，JavaScript 函数 handleScrollbar 会检查页面是否出现了滚动条。如果出现了滚动条，就给 body 元素添加一个 has-scrollbar 类。然后，CSS 就可以根据 has-scrollbar 类来调整页面布局，例如，为容器添加 padding-right，以抵消滚动条的宽度。

虽然这种方法可以实现类似的效果，但它比较复杂，并且可能会影响性能。因此，除非在 scrollbar-gutter 不可用的情况下，否则建议优先使用 scrollbar-gutter: stable。

高级应用：结合媒体查询

我们可以结合媒体查询，根据不同的屏幕尺寸，动态调整 scrollbar-gutter 的值。

例如：

body {
  scrollbar-gutter: auto; /* 默认值 */
}

@media (min-width: 768px) {
  body {
    scrollbar-gutter: stable; /* 在大屏幕上始终预留空间 */
  }
}

这段代码表示，在屏幕宽度小于 768px 时，scrollbar-gutter 的值为 auto；在屏幕宽度大于等于 768px 时，scrollbar-gutter 的值为 stable。这样可以根据不同的屏幕尺寸，优化用户体验。

最佳实践

优先使用 scrollbar-gutter: stable: 在大多数情况下，scrollbar-gutter: stable 都是解决页面抖动问题的最佳方案。
谨慎使用 scrollbar-width: none: 虽然 scrollbar-width: none 可以隐藏滚动条，但可能会影响用户的操作体验。
结合媒体查询: 可以结合媒体查询，根据不同的屏幕尺寸，动态调整 scrollbar-gutter 的值。
测试不同浏览器: 在不同的浏览器中测试你的代码，确保 scrollbar-gutter 能够正常工作。

常见问题

scrollbar-gutter: stable 会影响页面性能吗？ 通常情况下，scrollbar-gutter: stable 对页面性能的影响非常小，可以忽略不计。
为什么我设置了 scrollbar-gutter: stable，页面仍然会抖动？ 请检查是否还有其他 CSS 样式影响了页面布局。例如，如果你的页面使用了绝对定位或固定定位，可能会导致滚动条的出现影响页面布局。
scrollbar-gutter 和 overflow 属性有什么区别？ overflow 属性用于控制内容溢出时的行为，而 scrollbar-gutter 用于控制滚动条的显示和占位。它们是不同的属性，但可以一起使用。

结论：`scrollbar-gutter: stable` 提升用户体验的关键

scrollbar-gutter: stable 是一个简单而强大的 CSS 属性，可以有效防止弹窗出现时的页面抖动，提升用户体验。掌握它的用法，可以帮助你构建更加稳定、流畅的网页应用。

更多IT精英技术系列讲座，到智猿学院

CSS 滚动条装订线：scrollbar-gutter: stable 详解：防止弹窗出现时的页面抖动

问题的根源：滚动条的出现与消失

scrollbar-gutter 的作用：预留滚动条空间

scrollbar-gutter 的语法和取值