CSS Scrollbar

最新推荐文章于 2024-07-18 13:56:09 发布

JunChow520

最新推荐文章于 2024-07-18 13:56:09 发布

阅读量149

点赞数

本文链接：https://blog.csdn.net/JunChow520/article/details/106802981

版权

CSS中若在块级容器上设置了overflow:scroll/overflow-x:scroll/overflow-y:scroll属性，当块级内容区域超出块级元素范围时会以滚动条的形式展示，可以滚动里面的内容，里面的内容不会超出块级区域范围。

滚动条组合部分

滚动条

滚动条CSS伪元素

伪元素	描述
::-webkit-scrollbar	滚动条整体部分
::-webkit-scrollbar-button	滚动条两端按钮
::-webkit-scrollbar-track	滚动条外层轨道
::-webkit-scrollbar-track-piece	滚动条外层轨道，可见区域。
::-webkit-scrollbar-thumb	滚动条内可拖动的滑块
::-webkit-scrollbar-cornor	滚动条边角
::-webkit-resizer	滚动条右下角拖动块

自定义滚动条的样式

::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}
::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}
::-webkit-scrollbar-thumb {
    background: #2d3748;
    border: 0px none #ffffff;
    border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2b6cb0;
}
::-webkit-scrollbar-thumb:active {
    background: #000000;
}
::-webkit-scrollbar-track {
    background: #1a202c;
    border: 0px none #ffffff;
    border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
    background: #666666;
}
::-webkit-scrollbar-track:active {
    background: #333333;
}
::-webkit-scrollbar-corner {
    background: transparent;
}