自定义滚动条越来越受欢迎,它会给网站带来一些不同的感觉。实现自定义滚动条的方法有很多,你可以使用 JavaScript 或 jQuery 插件,但是使用 CSS 将是最直接的方法。
注意:你应该在自定义滚动条中使用 -webkit- 浏览器前缀,以便在使用 Webkit(和Blink)渲染引擎的浏览器中使用。
术语
-webkit-scrollbar
由七个不同的伪元素组成,它们一起构成一个完整的滚动条 UI 元素:
::-webkit-scrollbar
滚动条本身的背景。/* 1 */::-webkit-scrollbar-button
滚动条上的方向按钮(向上向下按钮)。/* 2 */::-webkit-scrollbar-track
滚动条轨道区域。/* 3 */::-webkit-scrollbar-track-piece
滚动条空白区域轨道。/* 4 */::-webkit-scrollbar-thumb
滚动条上的拖动按钮。/* 5 */::-webkit-scrollbar-corner
滚动条轨道上的底角(垂直滚动条和横向滚动条相交的位置)。/* 6 */::-webkit-resizer
可调整大小的按钮(垂直滚动条和横向滚动条相交的位置)。/* 7 */
了解这些术语后,就开始吧!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Customize the Browser's Scrollbar with CSS</title>
<link type="text/css" rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
</body>
</html>
CSS
.scrollbar {
background-color: #F5F5F5;
float: left;
height: 300px;
margin-bottom: 25px;
margin-left: 22px;
margin-top: 40px;
width: 65px;
overflow-y: scroll;
}
.force-overflow {
min-height: 450px;
}
此时的滚动条效果如下图所示:
现在,我们使用 scrollbar 伪元素来创建自定义滚动条。它将以 6px
的新宽度替换其默认宽度,然后添加 background-color: #F5F5F5
。
. . .
#style-1::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
. . .
由于我们知道滚动条包含 track
, button
和 thumb
(轨道,按钮和拖动条),我们现在将给予一个个性的拖动条。使用带有 webkit 前缀的伪元素(即 ::- webkit-scrollbar-thumb ),并设置 scrollbar-thumb 的 background-color
。
. . .
#style-1::-webkit-scrollbar-thumb {
background-color: #000000;
}
. . .
现在滚动条看起来像这样:
然后在 scrollbar-track
(滚动条轨道)上使用 box-shadow ,并在滚动条和滚动条轨道之间增加对比度。
. . .
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
这样就完成了一个完整的自定义滚动条效果,就像下面这样:
你还可以进行更多的尝试:
总结
使用 CSS 自定义滚动条的方式很简单,但看起来有点粗糙。但是,像 Windows ,OS X 和 Linux 这样的操作系统有着自己的滚动条风格。自定义滚动条虽然可以很个性,但同时也导致和操作系统的风格不统一。记住,你应该让滚动条看起来简单,而不是太花哨。
2017-09-21