浏览器滚动条的样式设计

最新推荐文章于 2024-06-11 11:03:10 发布

lian_老练

最新推荐文章于 2024-06-11 11:03:10 发布

阅读量301

点赞数 1

分类专栏： Web前端文章标签：滚动条样式设计

本文链接：https://blog.csdn.net/weixin_41461967/article/details/95626880

版权

Web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 样式说明：

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

2. 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-button {
            width: 0px;
            height: 0px;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.2);
            border: none;
            -webkit-border-radius: 4px;
                    border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0,0,0,0.3);
        }
        ::-webkit-scrollbar-track {
            background-color: transparent;
            border: none;
        }
        ::-webkit-scrollbar-track:hover {
            background-color: rgba(0,0,0,0.1);
        }
        ::-webkit-scrollbar-track:active {
            background-color: rgba(0,0,0,0.1);
        }
        ::-webkit-scrollbar-corner {
            background: transparent;
        }
    </style>
</head>
<body>
    <div id="blackSquare" style="width:50px; height:4000px;"></div>
</body>
</html>

3. 效果：

lian_老练

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器滚动条的样式设计

1. 样式说明：::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有thumb） ::-webkit-scrollbar-button 滚动条轨道两端的按钮，允许通过点击微调小方块的...
复制链接

扫一扫

专栏目录