web前端小案例（滚动条）_web前端中数字滚动条-优快云博客

本文链接：https://blog.youkuaiyun.com/itpika/article/details/100156196

本文分享了在web前端开发中如何对滚动条进行样式定制，通过CSS技术实现滚动条与网页设计风格的统一，提升用户体验。详细讲解了不同浏览器的兼容性处理和实战技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#box {
			height: 400px;
			width: 170px;
			border: 1px solid red;
			margin: 50px 0 0 100px;
			overflow: hidden;
			position: relative;
		}
		#content {
			position: absolute;
			width: 150px;
			top: 0;
			left: 0;
		}
		#gun {
			width: 20px;
			height: 100%;
			position: absolute;
			top: 0;
			right: 0;
			background-color: #d0c1c1;
		}
		#bar {
			width: 100%;
			height: 100px;
			background-color: red;
			border-radius: 10px;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>

</head>
<body>

	<div id="box">
		<div id="content"> 下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心 
		下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心下啊伤心啊伤心1</div>
		<div id="gun">
			<div id="bar"></div>
		</div>
	</div>

	<script type="text/javascript">
		let box = document.getElementById('box')
		let content = document.getElementById('content')
		let gun = document.getElementById('gun')
		let bar = document.getElementById('bar')
		let barHeight=0;
		if (content.scrollHeight>box.clientHeight) {
			barHeight = box.clientHeight/content.scrollHeight*gun.clientHeight
			console.log(barHeight)
		} else {
			gun.style.display = "none";
		}
		bar.style.height = barHeight+"px";


		bar.onmousedown = function(e) {
			let boxY = e.pageY - box.offsetTop - bar.offsetTop;
			document.onmousemove = function(e) {
				let y = e.pageY - box.offsetTop - boxY
				if (y<0) y=0;
				if (y>gun.clientHeight-bar.offsetHeight) y=gun.clientHeight-bar.offsetHeight;
				bar.style.top = y +"px";

				content.style.top = -y/gun.clientHeight*content.scrollHeight+"px";
			}
		}
		document.onmouseup = function() {
			document.onmousemove = null;
		}

	</script>


</body>
</html>