自定义滚动条

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 文档中显示代码片段,因为它在 *** 中显示(滚动条和灰色背景)

自定义滚动条跨浏览器[重复]

在 jQuery 自定义滚动条中使用鼠标滚动事件移动自定义滚动条

带有 css 或 jquery 的自定义滚动条 firefox