文章标签

这是一篇关于滚动条当前状态以及如何在不同操作系统和浏览器中控制其行为的有趣文章。这篇文章还重点介绍了一些我之前不知道的东西，例如 Element.scrollIntoView() 和 scroll-behavior CSS……

Das Surma

在这篇文章中，我们将利用一些非常规的 CSS 矩阵来构建一个自定义滚动条，它在滚动时不需要任何 JavaScript，只需要一些设置代码。

如果 将滚动条变成一只 Nyan 猫 并具有近乎完美的功用，那并不是……

在 macOS 中，用户可以设置何时在窗口中查看滚动条。这会影响操作系统中的所有窗口，包括 Web 浏览器。他们有三个选择

• 根据鼠标或触控板自动显示
• 滚动时显示

您可以将其设置为自动隐藏，而不是始终显示。

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

效果如下

感谢 Thierry Koblentz 从 Jon Neal 的 Sanitize.css 中挖掘出这颗宝石……

滚动条是互联网上几乎每个页面上都存在的 UI 组件之一，但我们（开发人员）对其几乎没有任何控制权。一些浏览器允许我们自定义其外观，但对于大多数……

如果您从一个没有滚动条的网站页面切换到另一个有滚动条的页面，您会看到布局略微偏移，因为内容会稍微向内压缩以腾出空间给滚动条。

一个经典的解决方案是html……

滚动条样式的简史

1. 过去只有 Internet Explorer（旧版本）可以使用诸如-ms-scrollbar-base-color之类的功能。这些功能现在都不存在了。
2. 然后，基于 WebKit 的浏览器引擎开始支持诸如::-webkit-scrollbar之类的东西

html {
  overflow-y: scroll;
}

这段 CSS 无效，但在除 Opera 之外的所有浏览器中都有效。这样做的原因是为了防止在来回浏览具有足够内容以显示垂直滚动条的页面时出现“居中跳跃”……