如何使用CSS来自定义div滚动条样式
想让你的网页滚动条看起来不一样、更加有个性？其实用CSS就能轻松搞定！首先要知道的是，滚动条一般是通过给元素设置overflow: scroll或overflow: auto来生成的。接着，利用WebKit引擎特有的伪类::-webkit-scrollbar，就能调整滚动条的大小、颜色、轨道和滑块的样式啦。
比如说，你可以这样写代码，设置滚动条宽度和高度，还有轨道的背景颜色和圆角：
body::-webkit-scrollbar {
width: 20px; /* 竖向滚动条宽度 */
height: 2px; /* 横向滚动条高度 */
background: #ccc;
border-radius: 10px; /* 轨道圆角 */
}
紧接着，使用::-webkit-scrollbar-thumb伪类来给滑块加点料，比如换颜色、加阴影，再酷炫点：
body::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3); /* 内阴影效果 */
}
不过要注意哦，这种自定义滚动条样式主要在Chrome和Safari等WebKit核心浏览器中生效，像Firefox和IE就不太支持啦，需要别的写法。如果想实现多浏览器兼容，得了解对应的属性和方法，稍微麻烦点，但也不是没法搞定。
怎么让滚动条既漂亮又兼容不同浏览器 以及QQ浏览器隐藏式滚动条怎么设置
-
设置滚动条宽度和轨道样式
使用::-webkit-scrollbar和::-webkit-scrollbar-track关键伪类可以调整滚动条整体宽度和轨道外观。比如你可以给轨道设置背景色、边框圆角和阴影，让它看起来更柔和、更有质感。 -
自定义滑块样式
滑块::-webkit-scrollbar-thumb是滚动条里可以拖动的部分，给它设置个动人的颜色和边框，细节部分都能提升用户体验。 -
在QQ浏览器中启用隐藏式滚动条
想要滚动条更好看，还不太占界面空间的话，QQ浏览器提供了隐藏式滚动条功能。具体步骤超简单：
- 打开QQ浏览器
- 点击右上角三横图标，进入【设置】
- 找到【高级】选项卡
- 启用【使用隐藏式的滚动条样式】
这样滚动条只在你滚动时才现身，平时保持干净整洁，简直不要太赞！
- 跨浏览器兼容技巧
Firefox用的不是WebKit内核，所以滚动条定制得用scrollbar-width和scrollbar-color这两个属性，虽然功能没那么丰富，但也能满足基本需求。IE和Edge旧版其实没啥太好用的滚动条样式控制，只能用一些“曲线救国”的方法，比如用JavaScript或遮罩元素代替。
不过别怕，如果你只关注主流浏览器，简单用几段CSS代码就能搞定滚动条样式啦！
相关问题解答
-
CSS自定义滚动条样式会不会影响浏览器性能？
哈哈，这个问题问得好！其实，简单的滚动条样式定制对性能没啥大影响，尤其是只改颜色、宽度啥的，浏览器完全OK的啦。但如果你的样式特别复杂，比如加很多阴影、动画啥的，可能会有点轻微卡顿，特别是在低端设备上，所以小心点用就行啦！ -
为什么我写了滚动条样式但Firefox里没效果？
哎，这事儿很常见，因为Firefox用的是自己的属性，不能识别::-webkit-scrollbar系列伪类。你需要额外写scrollbar-width和scrollbar-color来兼容它，比如：
css
* {
scrollbar-width: thin;
scrollbar-color: #888 #ccc;
}
这样才能让Firefox见风使舵，乖乖显示你设置的好样子。
-
隐藏式滚动条是不是所有浏览器都支持？
嗯，并不是哦。隐藏式滚动条是某些浏览器的特性，像QQ浏览器、新版Chrome支持的还挺好，但老IE和部分其他浏览器就没这玩意。侧面说啦，如果你想隐藏滚动条，但又要兼容，得用些JavaScript或覆盖层来“骗”浏览器了。 -
有没有办法用JavaScript动态改变滚动条样式？
当然有！你可以用JavaScript动态修改元素的class或者style属性，来实时调整滚动条CSS。比如切换不同主题，或者用户点击按钮时改变滚动条颜色啥的，想改啥都成。虽然滚动条样式主要靠CSS，但灵活加点JS，效果更炫酷，体验更棒！
新增评论