天天看点
返回

改变滚动条的颜色

<!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>

效果图

改变滚动条的颜色
html 滚动条 scroll 改变滚动条的颜色
上一篇: 改变滚动条样式
下一篇: QT QTabWidget 控件 使用详解1 新建界面 2 设置页面名字3 设置提示信息4 设置页面激活5 设置标题栏位置 6 设置页面关闭按钮 7 获取页面下标 8 获取页面总数 9 清空所有页面10  删除某个页面11 设置拖拽移动12 设置显示页面 13 页面关闭信号 14 页面标题信号15 页面变化信号 16 页面双击信号17 .h源文件18 .cpp源文件19 样式表 20 其它文章 ：

继续阅读