CSS滚动条样式

最新推荐文章于 2024-05-15 13:47:23 发布

zity_chow

最新推荐文章于 2024-05-15 13:47:23 发布

阅读量446

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/zity_chow/article/details/107842496

版权

笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .scroll {
            overflow-y: auto;
            overflow-x: auto;
            width: 300px;
            height: 300px;
            border: 1px solid red;
            word-break: keep-all;
        }

        .scroll::-webkit-scrollbar {
            width: 16px;
            height: 16px;
        }

        .scroll::-webkit-scrollbar-thumb {
            background-color: rgba(128, 128, 128, 0.5);
            background-clip: padding-box;
        }

        .scroll::-webkit-scrollbar-thumb:vertical {
            border-left: 10px solid transparent;
            border-radius: 16px 4px 4px 16px;
        }

        .scroll::-webkit-scrollbar-thumb:horizontal {
            border-top: 10px solid transparent;
            border-radius: 16px 16px 4px 4px;
        }

        .scroll::-webkit-scrollbar-thumb:hover {
            border-radius: 16px;
            background-color: rgb(128, 128, 128);
            border-color: rgb(128, 128, 128);
        }

    </style>
</head>
<body>
<div class="scroll">
    ::-webkit-scrollbar 滚动条整体部分<br/>
    ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）<br/>
    ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）<br/>
    ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。<br/>
    ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）<br/>
    ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处<br/>
    ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件<br/>
    <hr/>
    ::-webkit-scrollbar 滚动条整体部分<br/>
    ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）<br/>
    ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）<br/>
    ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。<br/>
    ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）<br/>
    ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处<br/>
    ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件<br/>
</div>
</body>
</html>

参考地址：https://blog.csdn.net/dKnightL/article/details/88317356

zity_chow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS滚动条样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .scroll { overflow-y: auto; overflow-x: auto; width: 300px; .
复制链接

扫一扫