我们在自定义滚动条样式前,首先要了解滚动条的结构。通俗来讲,滚动条由两部分组成:一部分是可以滑动的部分,我们称它为滑块;另一部分是滚动条的轨道,也就是滑块的轨道,一般来说,为了美观,滑块的颜色要比轨道的颜色深一些。
首先介绍滚动条相关的CSS代码,以及他们的含义
::-webkit-scrollbar:指滚动条整体部分,它的属性有width,height,background等
::-webkit-scrollbar-button:指滚动条两边的按钮。当不需要时可以用display:none将其隐藏
::-webkit-scrollbar-track:指外层轨道部分,当不需要时可以用display:none将其隐藏,也可以添加你想要的颜色
::-webkit-scrollbar-track-piece:指内层轨道部分,即滚动条中间的部分
::-webkit-scrollbar-thumb:指滚动条里面可以拖动的部分,也就是滑块
::-webkit-scrollbar-corner:指边角部分
::-webkit-resizer:他用来定义右下角滑块的样式
但是最常用的是滚动条整体部分(-webkit-scrollbar),滑块(-webkit-scrollbar-thumb)以及外轨道(-webkit-scrollbar-track)三部分。
接下来我们将div盒子里面超出的部分隐藏,给div设置滚动条样式,看看怎么用CSS实现滚动条样式。
HTML部分:
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday
haveaniceday