CSS-滚动条介绍

CSS-滚动条是用于美化浏览器默认样式的滚动条的一种CSS样式。美化后的滚动条将为你的页面增添额外的魅力。

语法

/* 定义滚动条宽度与高度 */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
/* 定义滚动条背景色 */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* 定义滚动条上的滑块 */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* 定义滑块上的hover效果 */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

解释

• ::-webkit-scrollbar：定义滚动条的宽度和高度，使其在页面上可见。这个伪元素只在webkit内核有用。在其他浏览器上是无效的。
• ::-webkit-scrollbar-track：定义滚动条轨道的背景颜色。
• ::-webkit-scrollbar-thumb：定义滚动条滑块的背景颜色。这个滑块是拖动滚动条时随之滑动的内容。
• ::-webkit-scrollbar-thumb:hover：定义滑块上的hover效果。

Demo

<style>
  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  /* 示例内容 */
  #scrollable-content {
    overflow-y: scroll;
    max-height: 100px;
    width: 200px;
    background-color: #ddd;
    border: 1px solid #999;
    padding: 12px;
  }
</style>

<div id="scrollable-content">
  <h1>滚动条 CSS</h1>
  <p>滚动条是我们在浏览器或者 APP 中使用非常普遍的一个组件。Chrome、Firefox、Safari 等浏览器都提供了丰富的设置方式让我们自定义滚动条的外观。</p>
  <p>在这篇教程中，我们会学到如何使用 CSS 改变默认滚动条的样式。</p>
  <p>让我们看一下下面的代码示例。</p>
</div>

效果

结论

滚动条 CSS 样式可以让我们调整默认的滚动条样式，从而达到美化页面的目的。但是，需要注意的是，这个样式只在webkit内核上有效。不过现在大部分的浏览器都采用了webkit内核，因此，这个样式依然非常有用。