css滚动条怎么设置-CSS设置滚动条样式的实现

webkit滚动条样式重置

1. 滚动条包含滚动条按钮和轨道。 轨道进一步细分为轨道片段和拇指。 痕迹部分是拇指的上半部分和下半部分。

2.滚动条角点是垂直垂直交叉角点区域

3.Resize用于设置滚动条交汇处的小控件，用于拖动调整元素的大小

组成结构图如下：

一旦找到滚动条的自定义样式，浏览器默认的样式设置就会失效css滚动条怎么设置，只会使用css中定义的样式。 这意味着不能仅为滚动条按钮或滚动条轨道设置该值。

-webkit-scrollbar  /* 滚动条整体部分，重置时必须要设置 */
-webkit-scrollbar-button  /* 滚动条的轨道的两端按钮  */
-webkit-scrollbar-track /* 滚动条的轨道（包含thumb和trace-piece）*/
-webkit-scrollbar-track-piece /* 轨道中下方块的上下(左右)部分*/
-webkit-scrollbar-thumb  /*滚动条里面的小方块*/
-webkit-scrollbar-corner /* 垂直和水平的交叉角 */
-webkit-resize // 滚动条的交汇处上用于拖动调整元素大小的小控件 */

可以结合下面的伪类来设置（不同操作系统浏览器的滚动条可能不同css滚动条怎么设置，都可以按照下面的伪类来设置）：

IE 中只能更改滚动条颜色

scrollbar-arrow-color:#f2f2f3;  /*上下箭头*/
scrollbar-track-color  /*底层背景色*/
scrollbar-face-color   /*滚动条前景色，对应thumb*/
scrollbar-shadow-color /*滚动条边线色,thubm的border*/
scrollbar-highlight-color  /*滚动条整体颜色*/
scrollbar-base-color /* 滚动条基准颜色 */

参考

样式滚动条| 网络工具包

以上就是本文的全部内容。 希望对您的学习有所帮助，也希望您多多支持脚本之家。