自定义滚动条样式

最新推荐文章于 2021-07-30 09:06:27 发布

今天拔牙么

最新推荐文章于 2021-07-30 09:06:27 发布

阅读量493

点赞数

分类专栏： HTML css3 文章标签：前端

本文链接：https://blog.csdn.net/weixin_48271592/article/details/118726844

版权

本文介绍了如何美化滚动条，包括滚动条的属性、隐藏滚动条但保留滚动效果的方法，以及在div hover时显示自定义样式的滚动条。同时，文章探讨了不同浏览器（如WebKit、IE和Firefox）之间的兼容性问题，提供了相应的样式调整策略。

摘要由CSDN通过智能技术生成

滚动条美化：

原生滚动条不是很好看，能拯救一下还是要拯救的。

1.滚动条的属性们：

1、滚动条的属性（可选项）

/*  滚动条整体部分  */
::-webkit-scrollbar {
   
}
/* 滚动条里面滑块，能上下左右移动(取决于是垂直还是水平) */
::-webkit-scrollbar-thumb {
   
}
/* 滚动条的轨道(里面装有thumb) */
::-webkit-scrollbar-track {
   
}
/* 滚动条轨道两端的按钮，允许通过点击微调小方块的位置 */
::-webkit-scrollbar-button {
   
}
/* 内层轨道，滚动条中间部分(除去) */
::-webkit-scrollbar-track-piece {
   
}
/* 边角，及两个滚动条的交汇处  */
::-webkit-scrollbar-corner {
   
}
/* 两个滚动条的交汇处上用于拖动调整元素大小的小控件 */
::-webkit-resizer{
   }