css修改滚动条样式

最新推荐文章于 2024-05-21 00:00:00 发布

柠檬布丁^O^

最新推荐文章于 2024-05-21 00:00:00 发布

阅读量156

点赞数

本文链接：https://blog.csdn.net/qq_41805715/article/details/84643680

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
            width: 200px;
            height: 300px;
            position: absolute;
            top: 10px;
            left: 10px;
            overflow:hidden;
        }
        .content{
            overflow-x: hidden;
            overflow-y: auto;
            height: 100%;
        }
        /*滚动条样式*/
        .content::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;  /* 滚动条宽度 */
        }
        .content::-webkit-scrollbar-thumb {/*滚动条里面的样式*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        .content::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);
        }
        /*  ::-webkit-scrollbar 滚动条整体部分，可以设置宽度啥的
            ::-webkit-scrollbar-button 滚动条两端的按钮
        	::-webkit-scrollbar-track  外层轨道
        	::-webkit-scrollbar-track-piece  内层滚动槽
        	::-webkit-scrollbar-thumb 滚动的滑块
        	::-webkit-scrollbar-corner 边角
        	::-webkit-resizer 定义右下角拖动块的样式 */
	</style>
</head>
<body>
<div class="box">
	<div class="content">
		内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
	</div>
</div>
</body>
</html>

柠檬布丁^O^

关注

0
点赞
踩
0

收藏

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

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; .box{ width: 200px;
复制链接

扫一扫

专栏目录