CSS美化滚动条样式

滚动条是个很常见的东西,浏览网页的时候都会看到它的身影,但浏览器自带的滚动条通常不太美观,必要的时候我们会调整其样式以适配页面的UI设计,下面就介绍如何通过CSS美化滚动条样式。

兼容性

Webkit内核浏览器对滚动条样式支持较好,这里说的Webkit内核浏览器包括谷歌的Chrome浏览器,苹果公司的Safari浏览器,以及最新的Opera浏览器。这些浏览器加起来占有超过半数的桌面浏览器市场份额,对于移动端浏览器,基本上是Chrome浏览器和Safari浏览器的天下,唯一的遗憾是火狐浏览器,至今没有对CSS滚动条属性做任何的改进,至于IE浏览器,你可能会感到意外,IE浏览器是最早的一个支持滚动条外观CSS自定义的浏览器,早在IE5.5版时就支持,但仅支持颜色的改变,这些属性今天仍然是延用的。鉴于目前浏览器市场的格局,我们可以大胆的通过CSS来实现滚动条的美化。

Webkit下面的CSS滚动条属性

常用的有以下几个属性

  1. ::-webkit-scrollbar 滚动条整体部分
  2. ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
  3. ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
  4. ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
  5. ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
  6. ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
  7. ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

简约版

::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
::-webkit-scrollbar-track {
	background: #f6f6f6;
	border-radius: 2px;
}
::-webkit-scrollbar-thumb {
	background: #aaa;
	border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
	background: #747474;
}
::-webkit-scrollbar-corner {
	background: #f6f6f6;
}

这些CSS属性同样适用于局部滚动条美化,如:

HTML

<div class="scroll">
    <div class="content">
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
        <p>这里是内容区域</p>
    </div>
</div>

CSS

.scroll {
	width: 200px;
	height: 200px;
	overflow: auto;
}
.scroll .content {
	width: 400px;
	height: 400px;
}
.scroll::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}
.scroll::-webkit-scrollbar-track {
	background: #f6f6f6;
	border-radius: 2px;
}
.scroll::-webkit-scrollbar-thumb {
	background: #aaa;
	border-radius: 2px;
}
.scroll::-webkit-scrollbar-thumb:hover {
	background: #747474;
}
.scroll::-webkit-scrollbar-corner {
	background: #f6f6f6;
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据