master

分支 (2)

管理

管理

master

dev_test

web-test
/
修改浏览器滚动条样式(兼容IE).html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>修改滚动条颜色</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				background-color: #F3F3F3;
				font-size: 14px;
				font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
				letter-spacing: 0;
				color: #333333;
			}

			div {
				width: 200px;
				height: 200px;
				padding: 20px;
				overflow: auto;
				margin: 50px auto;
			}

			/* IE 浏览器 */
			.scrollbar {
				/*三角箭头的颜色*/
				scrollbar-arrow-color: #fff;
				/*滚动条滑块按钮的颜色*/
				scrollbar-face-color: #0099dd;
				/*滚动条整体颜色*/
				scrollbar-highlight-color: #0099dd;
				/*滚动条阴影*/
				scrollbar-shadow-color: #0099dd;
				/*滚动条轨道颜色*/
				scrollbar-track-color: #0066ff;
				/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
				scrollbar-3dlight-color: #0099dd;
				/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
				scrollbar-darkshadow-color: #0099dd;
				/*滚动条基准颜色*/
				scrollbar-base-color: #0099dd;
			}

			/* chrome & safari 浏览器 */
			/*滚动条整体部分,必须要设置*/
			.scrollbar::-webkit-scrollbar {
				width: 10px;
				height: 10px;
				background-color: #0099ff;
			}

			/*滚动条的轨道*/
			.scrollbar::-webkit-scrollbar-track {
				background-color: #0099ff;
			}

			/*滚动条的滑块按钮*/
			.scrollbar::-webkit-scrollbar-thumb {
				border-radius: 0;
				background-color: #f00;
				box-shadow: inset 0 0 5px #f00;
			}

			/*滚动条的上下两端的按钮*/
			.scrollbar::-webkit-scrollbar-button {
				height: 0;
				background-color: #0099ff;
			}
		</style>
	</head>
	<body>
		<div class="scrollbar">
			<h3>1846492969</h3>
			<h3>helang.love@qq.com</h3>
			<h3>web-7258</h3>
			<h3>WEB前端梦之蓝</h3>
			<h3>1846492969</h3>
			<h3>helang.love@qq.com</h3>
			<h3>web-7258</h3>
			<h3>WEB前端梦之蓝</h3>
		</div>
	</body>
</html>