摘要：需求有的时候我们不想使用浏览器默认的滚动条样式，因为不够定制化和美观。可设置竖直水平方向的滚动条可以设置水平方向的滚动条，不加默认是竖直方向。自定义滚动条样式可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。
欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~
本文由前端林子发表
本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。
0.需求有的时候我们不想使用浏览器默认的滚动条样式，因为不够定制化和美观。那么如何自定义滚动条的样式呢？下面一起来看看吧。
1 基础知识 1.1 Webkit内核的css滚动条选择器::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式
属性：
::-webkit-scrollbar — 整个滚动条
::-webkit-scrollbar-track — 滚动条轨道
::-webkit-scrollbar-thumb — 滚动条上的滚动滑块
::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头)
::-webkit-scrollbar-track-piece — 滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner — 边角，即当同时有垂直滚动条和水平滚动条时交汇的部分
::-webkit-resizer — 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)
注意：
(1)浏览器的支持情况：
::-webkit-scrollbar 仅仅在支持Webkit的浏览器 (Chrome, Safari)可以使用。
(2)可设置竖直/水平方向的滚动条
可以设置水平方向的滚动条(:horizontal)，不加默认是竖直方向(:vertical)。
(3)滚动条上的按钮（:decrement、:increment）
可以设置图片，这点会在下面demo中展示。
1.2 IE自定义滚动条样式可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。这里我只列举了部分样式，诸如scrollbar-3dlight-color、scrollbar-highlight-color等样式试了下没有效果，这里不再列出：
scrollbar-arrow-color — 滚动条三角箭头的颜色 scrollbar-face-color — 滚动条上滚动滑块颜色
scrollbar-track-color— 滚动条轨道、按钮背景的颜色 scrollbar-shadow-color— 滚动框上滑块边框的颜色
2.demo快速上手 2.1 Webkit内核的浏览器自定义滚动条样式 (chrome, safari)如果觉得上述说明有些抽象，可以直接在浏览器中打开demo，结合demo中的注释来理解各个属性的意义。图中我对其中的一些属性做了标注，滚动条外层轨道属性并未在图中标注，可打开chrome浏览器控制台查看属性：
scrollbar的demo--lynnshen 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
实现效果：
WebKit内核的浏览器
说明：
(1)滚动条两端的按钮使用的图片，四个角分别使用了四张图片;
(2).scolltable实现了水平垂直居中的效果，具体方法是：使用绝对对位，将元素的定点定位到body的中心。然后使用负margin（即元素宽高的一半）将其拉回到body的中心。
2.2 IE自定义滚动条样式scrollbar for IE--lynnshen 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
实现效果：
IE
3.小结本文主要是想记录下在Webkit内核的浏览器和IE中，如何自定义滚动条的样式，并分别提供了两个demo。如有问题，欢迎指正。
此文已由作者授权腾讯云+社区发布，更多原文请点击
搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114277.html
摘要：需求有的时候我们不想使用浏览器默认的滚动条样式，因为不够定制化和美观。可设置竖直水平方向的滚动条可以设置水平方向的滚动条，不加默认是竖直方向。自定义滚动条样式可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。 欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和I...
摘要：可设置竖直水平方向的滚动条可以设置水平方向的滚动条，不加默认是竖直方向。自定义滚动条样式自定义滚动条样式可自定义的样式比较少，只能控制滚动条各个部分显示的颜色，定制性较低。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器，并在demo中展示如何在Webkit内核浏览器和IE浏览器中，自定义一个横向以及一个纵向的滚动条。 0.需求...
摘要：表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。 一 前言 在CSS 中，如果我们在块级容器上设置了属性: overflow:scroll /* x y 方向都会*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 当块级内容区域...
摘要：表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。 一 前言 在CSS 中，如果我们在块级容器上设置了属性: overflow:scroll /* x y 方向都会*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 当块级内容区域...
摘要：用于所有滚动条轨道，指示滚动条圆角是否显示。用于所有的滚动条轨道，指示应用滚动条的某个页面容器元素是否当前被激活。 因为在现在的大部分项目中很多都用到了滚动条，有时候用到模拟的滚动条，现在说下滚动条的CSS也能解决。 比如网易邮箱的滚动条样子很好看，就是利用的CSS来设置的，而且是webkit浏览器的。如图所示： showImg(https://segmentfault.com/img...
阅读 1370·2021-09-30 09:55
阅读 1894·2021-08-27 13:10
阅读 2243·2019-08-29 17:22
阅读 1297·2019-08-29 16:30
阅读 3462·2019-08-26 18:37
阅读 2346·2019-08-26 11:47
阅读 1161·2019-08-23 14:44
阅读 1739·2019-08-23 13:46
