css 改变滚动条的颜色以及大小

最新推荐文章于 2024-04-22 14:02:46 发布

meng@meng

最新推荐文章于 2024-04-22 14:02:46 发布

阅读量2.6k

点赞数

文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/s3248149993/article/details/121615886

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .inner {
        width: 265px;
        height: 400px;
        position: absolute;
        top: 33px;
        left: 13px;
        overflow: hidden;
    }

    .innerbox {
        overflow-x: auto;
        overflow-y: auto;
        color: #000;
        font-size: .7rem;
        font-family: "\5FAE\8F6F\96C5\9ED1", Helvetica, "黑体", Arial, Tahoma;
        height: 100%;
        width: 100%;
    }

    /*滚动条样式*/
    .innerbox::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .innerbox::-webkit-scrollbar-thumb {
        /* border-radius: 10px; */
        -webkit-box-shadow: inset 0 0 5px rgba(9, 74, 238, 0.7);
        background: rgba(32, 50, 96, .7);
    }

    .innerbox::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(9, 74, 238, 0.7);
        /* border-radius: 0; */
        background: rgba(0, 0, 0, 0.1);

    }
</style>

<body>
    <div class="inner">
        <div class="innerbox">
            <p style="height:200px; width: 400px;">这是内容111</p>
            <p style="height:400px; width: 400px;">这里是内容222</p>
            <p>这里是内容333</p>
        </div>

    </div>
</body>

</html>

下面就讲解滚动条几个属性，主要有下面7个属性

::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层滚动槽
::-webkit-scrollbar-thumb 滚动的滑块
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

meng@meng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 改变滚动条的颜色以及大小

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
复制链接

扫一扫