自定义滚动条样式

最新推荐文章于 2024-01-11 15:47:54 发布

yw00yw

最新推荐文章于 2024-01-11 15:47:54 发布

阅读量192

点赞数 2

分类专栏： css 文章标签： scroll 滚动条

本文链接：https://blog.csdn.net/yw00yw/article/details/88999116

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!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>
        .scroll {
            margin: 0 auto;
            width: 300px;
            height: 300px;
        }

        .scroll_outer {
            width: 100%;
            height: 100%;
            overflow:scroll;
        }

        .scroll_inner {
            width: 310px;
            height: 340px;
        }

        .scroll_outer::-webkit-scrollbar {
            width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 8px;
        }

        .scroll_outer::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 8px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.15);
            background: rgba(0, 0, 0, 0.15);
            display: none;
        }

        .scroll:hover .scroll_outer::-webkit-scrollbar-thumb {
            display: block;
        }

        .scroll_outer::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.02);
            border: 1px solid #ddd;
        }

    </style>
</head>
<body>
    <div class="scroll">
        <div class="scroll_outer">
            <div class="scroll_inner">
                滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试滚动条测试
            </div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

::-webkit-scrollbar {  /* 滚动条整体部分 */
    width:8px;
    margin-right:2px
 }
 
 ::-webkit-scrollbar:horizontal {
     height:8px;
     margin-bottom:2px
 }
 ::-webkit-scrollbar-track {  /* 外层轨道 */
     border-radius: 9px;
 }
 ::-webkit-scrollbar-track-piece {  /*内层轨道，滚动条中间部分 */
     background-color: rgb(190, 190, 190, .2); /*直接换成#eee形式*/
     box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
     border-radius: 9px;
 }
 ::-webkit-scrollbar-thumb {  /* 滑块 */
     width:10px;
     border-radius: 5px;
     background: rgb(179, 179, 179);
 }
 ::-webkit-scrollbar-corner { /* 边角 */
     width: 10px;
     background-color: #fff;
 }
 ::-webkit-scrollbar-thumb:hover { /* 鼠标移入滑块 */
     background: #909090;
 }

.demo {
    width: 400px;
     height: 200px;
     overflow: auto;
 }