使用CSS创建自定义滚动条

发表于 2年以前 | 总阅读数：384 次

如果你正想要设计浏览器滚动条的样式，那么你来对地方了。本教程将介绍如何使用纯CSS为浏览器创建自定义滚动条。

是的！你没听错，我们不会使用任何滚动条插件或自定义滚动函数。我们将探索使用CSS属性设置浏览器默认滚动条样式的方法。使用纯CSS的好处是，与滚动插件相比页面滚动将保持更加平滑。

我们将要分享的滚动条样式可以用来替换浏览器的默认滚动条样式，包括水平滚动条和垂直滚动条。

如何创建自定义滚动条

为了创建自定义滚动条，你需要在网页上有一些可滚动的内容。一般来说，你不需要为自定义滚动条创建任何特殊的HTML。如果网页中已经有滚动条，那么可以直接跳过HTML，去阅读后面的CSS样式指南。当然，如果页面上没有任何元素，你也可以尝试以下可滚动框：只需保留一些内容即可。

<div class="scrollable" style="height: 1000px; width: 400px"> 
This is a scrollable div.
</div>

除此之外，我们为水平、垂直以及水平和垂直滚动创建了3个类。

你可以将horizontal-scroll类添加到div元素以制作水平滚动框。

<div class="horizontal-scroll">
Place your div content here...
</div>

同理，vertical-scroll类用于垂直可滚动框。

<div class="vertical-scroll">
Place your div content here...
</div>

你可以添加类名scrollable，这是水平和垂直可滚动框。

<div class="scrollable">
Place your div content here...
</div>

使用CSS设置浏览器滚动条的样式

我们将使用CSS中的-WebKit-扩展来设置滚动条的样式，目标是浏览器内置的用于滚动条的选择器。选择带有-webkit-前缀的滚动条并定义滚动条的宽度。你可以根据需要自定义width属性值（这里定义为15px）。

/* scrollbar width */
::-webkit-scrollbar {
  width: 15px;
}

最佳设计的网页滚动条

如果你想添加具有悬停效果的自定义滚动条，只需复制以下代码并将其添加到网页中。

<style>
/* width */
::-webkit-scrollbar {
  width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #ddd; 
  border-radius: 15px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: orange; 
  border-radius: 15px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #e30d00; 
}
</style>