自定义滚动条
Posted 橘雎
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义滚动条相关的知识,希望对你有一定的参考价值。
css修改滚动条样式
css样式
/*修改滚动条样式*/ div::-webkit-scrollbar{ width:10px; height:10px; /**/ } div::-webkit-scrollbar-track{ background: rgb(239, 239, 239); border-radius:2px; } div::-webkit-scrollbar-thumb{ background: #bfbfbf; border-radius:10px; } div::-webkit-scrollbar-thumb:hover{ background: #333; } div::-webkit-scrollbar-corner{ background: #179a16; }
参数说明
::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条) ::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb) ::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去) ::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处 ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
//网址链接,可以查看
https://blog.csdn.net/kangkang_90/article/details/91047592
以上是关于自定义滚动条的主要内容,如果未能解决你的问题,请参考以下文章
Malihu 自定义滚动条 - 滚动到 id 插件在页面中不起作用
如何在 MS Word 文档中显示代码片段,因为它在 *** 中显示(滚动条和灰色背景)