滚动条样式

Css滚动条样式

目录

• 前提
• 样式修改
  • ::-webkit-scrollbar
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-button
  • ::-webkit-scrollbar-thumb

参考:https://www.cnblogs.com/xiaohuochai/p/5294409.html

前提

---

以上面的博客内容作为前提,先将其提出的滚动条的默认属性例举一下

1. 默认的滚动条来着于标签:

2. 在浏览器中的默认宽度为:

   chrome/firefox/IE 17px
   safari 21px
   

3. 兼容性问题: 分为IE和别的浏览器,那么就是没问题,具体请参考上面的文章

样式修改

---

IE的话,我没在用所以就不写了,有需要就看上面的文章

webkit内核的浏览器支持滚动条自定义样式，通过伪类来实现的

伪类	对应部分
::-webkit-scrollbar	滚动条整体部分
::-webkit-scrollbar-thumb	滚动滑块
::-webkit-scrollbar-track	外层轨道
::-webkit-scrollbar-track-piece	内层轨道
::-webkit-scrollbar-corner	边角
::-webkit-scrollbar-button	两端按钮

emmm,我是觉得有这四个就基本够用了

::-webkit-scrollbar

---

这是用来确定整个滚动的基本大小的

最基本的参数就是 width ,用于确定轨道的宽度

其他的就没有什么必要在这里添加,等到后面的模块再定义会好一些

::-webkit-scrollbar-track

---

这个 和 ::-webkit-scrollbar-track-piece其实效果差不多,但是,在覆盖的层级上,::-webkit-scrollbar-track-piece在较上层,会覆盖掉::-webkit-scrollbar-track ,所以也没有都使用的必要

这个属性定义的是滚动条的轨道,最实用的修饰大概就是box-shadow,但是要使用box-shadow的inset参数,以达到一个凹槽的视觉效果

模板:

box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color : #fff;

::-webkit-scrollbar-button

---

滚动条边界按钮

在不定义的时候就不会生成,不占用滚动条长度,

定义了之后会占用滚动条的部分长度

模板:

border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #555;

::-webkit-scrollbar-thumb

---

滚动滑块

好像属性上与外边框差不多,盒子阴影,背景色,边框的弧度之类的

模板:

border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #555;

嘛~,这些的背景色也可以直接换成图片,随便试一下吧