码迷,mamicode.com
首页 > 其他好文 > 详细

滚动条样式自定义

时间:2021-04-19 14:55:25      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:bsp   line   border   width   white   har   space   view   meta   

<!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>滚动条样式自定义</title>
    <style>
        .test{
            width: 50px;
            height: 200px;
            overflow: auto;
            float: left;
            margin: 5px;
            border: none;
            background: #f00;
        }
        .scrollbar{
            width: 30px;
            height: 300px;
            margin: 0 auto;
            background: #0f0;
        
        }
        .test-1::-webkit-scrollbar {/*滚动条整体样式*/
                width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
                height: 1px;
            }
        .test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
                border-radius: 10px;
                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                background: #535353;
            }
        .test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
                -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                border-radius: 10px;
                background: #EDEDED;
            }
    </style>
</head>
<body>
    <div class="test test-1">
        <div class="scrollbar"></div>
    </div>
</body>
</html>

 

<!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>js效果图测试内容</title>
<style>
.test{
width: 50px;
height: 200px;
overflow: auto;
float: left;
margin: 5px;
border: none;
background: #f00;
}
.scrollbar{
width: 30px;
height: 300px;
margin: 0 auto;
background: #0f0;
 
}
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
</style>
</head>
<body>
<div class="test test-1">
<div class="scrollbar"></div>
</div>
</body>
</html>

滚动条样式自定义

标签:bsp   line   border   width   white   har   space   view   meta   

原文地址:https://www.cnblogs.com/enhengenhengNymph/p/14667834.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!