css改变滚动条的颜色-横向滚动demo效果示例（整理）

知秋~

已于 2022-06-15 10:17:05 修改

阅读量9.7k

点赞数 2

文章标签：滚动条 scroll 改变滚动条的颜色

于 2018-11-03 19:06:05 首次发布

本文链接：https://blog.csdn.net/qq_38881495/article/details/83689721

版权

<!DOCTYPE HTML>
<html>
<head>
    <title>改变滚动条的颜色</title>
<style>
	.inner{
		width: 265px;
		height: 400px;
		position: absolute;
		top: 33px;
		left: 13px;
		/*cursor: pointer;*/
		overflow:hidden;
	}
	.innerbox{
		overflow-x: hidden;
		overflow-y: auto;
		color: #000;
		font-size: .7rem;
		height: 100%;
	}
	/*核心代码*/
	.innerbox::-webkit-scrollbar {/*滚动条整体样式*/
		width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
		height: 4px;
	}
	.innerbox::-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);
	}
	.innerbox::-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);
	}
	/*核心代码*/
</style>
</head>
<body>
<div class="inner">
	<div class="innerbox">
		<p style="height:200px;">111</p>
		<p style="height:600px;">222</p>
		<p>333</p>
	</div>
</div>
</body>
</html>

<div style="width: 375px;height: 100%;">


    <style>
		/*核心代码*/
		.warp::-webkit-scrollbar {/*滚动条整体样式*/
			width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
			height: 4px;
		}
		.warp::-webkit-scrollbar-thumb {/*滚动条里面小方块 0.5是滚筒条透明度*/
			border-radius: 5px;
			-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
			background: rgba(0,0,0,0);
		}
		.warp::-webkit-scrollbar-track {/*滚动条里面轨道*/
			-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
			border-radius: 0;
			background: rgba(0,0,0,0);
		}
		/*核心代码*/
        .warp {
            font-size: 0;
            white-space: nowrap;
            overflow: scroll;
        }
        .item {
            background: red;
            display: inline-block;
            font-size: 14px;
            width: 25%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            color: #fff;
        }
    </style>
    <div class="warp">
    <!-- 横向滚动 -->
        <div class="item">111</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>          
    </div>
</div>

效果图在这里插入图片描述

知秋~

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
css改变滚动条的颜色-横向滚动demo效果示例（整理）

&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;改变滚动条的颜色&lt;/title&gt;&lt;style&gt; .inner{ width: 265px; height: 400px; position: absolute; top: 33px; left: 13px; /*cur........
复制链接

扫一扫