css怎么设置滚动条宽度-木庄网络博客

2022-03-23 10:59:11 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者V，侵删。

css设置滚动条宽度的方法：首先使用【::-webkit-scrollbar】伪类选择器设置滚动条样式；然后在该伪类选择器中通过width属性设置滚动条宽度即可。

环境：

本文适用于所有品牌的电脑。

（学习视频分享：css视频教程）

方法思路如下：

在CSS中使用::-webkit-scrollbar伪类选择器来设置滚动条样式，并在此伪类选择器中通过width属性设置滚动条的宽度。

::-webkit-scrollbar CSS伪类选择器影响了一个元素的滚动条的样式。

你可以使用以下伪元素选择器去修改各式webkit浏览器的滚动条样式:

::-webkit-scrollbar ― 整个滚动条

::-webkit-scrollbar-button ― 滚动条上的按钮 (上下箭头)

::-webkit-scrollbar-thumb ― 滚动条上的滚动滑块

::-webkit-scrollbar-track ― 滚动条轨道

::-webkit-scrollbar-track-piece ― 滚动条没有滑块的轨道部分

::-webkit-scrollbar-corner ― 当同时有垂直滚动条和水平滚动条时交汇的部分

::-webkit-resizer ― 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)

实现代码：

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者