拖拽+自定义滚动条

最新推荐文章于 2022-10-10 22:17:01 发布

原创最新推荐文章于 2022-10-10 22:17:01 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现自定义滚动条的方法。通过拖拽滚动条来改变内容区的显示部分，同时支持鼠标滚轮操作。文章详细展示了如何设置样式和编写交互逻辑。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>拖拽+滚动条</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
	*{margin:0; padding: 0;}
	body{font-family:14px/100% "microsoft yahei"; }
	#f-wrap{width: 1000px; margin: 0 auto; padding: 10px; border:1px dotted green;}
	#box{width:820px; padding-right:12px; height:500px; border:1px solid #ccc; overflow: hidden; position: relative;}
	/*内容区*/
	#cnt{width:800px; line-height:24px; position:absolute; padding:10px; background-color:#fff;}
	/*滚动条*/
	#scrollBd{width:12px; height:500px; background-color:#ddd; position:absolute; top:0; right:0;}
	#scrollBar{width:12px; height:50px; background-color:#aaa; position: absolute; cursor: pointer; -webkit-border-radius:12px; -moz-border-radius:12px; -o-border-radius:12px; border-radius:12px;}
</style>
<script type="text/javascript">
	window.onload= function(){
		var oWrap = document.getElementById('f-wrap'),
			oScroll = document.getElementById('scrollBd'),
			oBar = document.getElementById('scrollBar'),
			oBox = document.getElementById('box'),
			oCnt = document.getElementById('cnt');

		// 点击执行
		oBar.onmousedown = function(e){
			var e = e||event;
			var disY = e.clientY - oBar.offsetTop;
			if(oBar.setCapture){
				oBar.onmousemove = fnMove;
				oBar.onmouseup = fnUp;
				oBar.setCapture();
			}else{
				document.onmousemove = fnMove;
				document.onmouseup = fnUp;
			}

			// 移动
			function fnMove(e){
				var e = e||event;
				var t = e.clientY - disY;
				setTop(t);
			}

			// 弹起
			function fnUp(){
				this.onmousemove = null;
				this.onmouseup = null;
				if(this.releaseCapture){
					this.releaseCapture();
				}
			}
			return false;
		}
		// 滚动
		function fnWheel(e){
			var e = e||event;
			var flag =true;
			flag = e.wheelDelta ? e.wheelDelta<0 : e.detail>0;
			if(flag){
				setTop(oBar.offsetTop+10);
			}else{
				setTop(oBar.offsetTop-10)
			}
			if(e.preventDefault){
				e.preventDefault();
			}
			return false;
		}
		addEvent(oWrap,'mousewheel',fnWheel);
		addEvent(oWrap,'DOMMouseScroll',fnWheel);

		function setTop(t){
			if(t<=0){
				t=0;
			}else if(t >= oScroll.offsetHeight - oBar.offsetHeight){
				t = oScroll.offsetHeight - oBar.offsetHeight;
			}
			oBar.style.top = t +'px';
			// 滑块所占比例
			var scale = t/(oScroll.offsetHeight - oBar.offsetHeight);

			oCnt.style.top = -(oCnt.offsetHeight - box.offsetHeight) * scale + 'px';
			document.title= scale;
		}
	}

	// 浏览器兼容：封装事件绑定
	function addEvent(obj,sEvent,fn){
		if(obj.attachEvent){
			obj.attachEvent('on'+ sEvent,fn);
		}else{
			obj.addEventListener(sEvent,fn,false);
		}
	}
</script>
</head>
<body>
	<div id="f-wrap">
		<span style="float:right; font-size:20px; color:#999;">可执行区域</span>
	    <div id="box">
	    	<div id="scrollBd">
		    	<div id="scrollBar"></div>
		    </div>
	    	<div id="cnt">
	    		<h2>小苹果</h2>
			    <p>我种下一颗种子</p>
			    <p>终于长出了果实</p>
			    <p>今天是个伟大日子</p>
			    <p>摘下星星送给你</p>
			    <p>拽下月亮送给你</p>
			    <p>让太阳每天为你升起</p><br>
			    <p>变成蜡烛燃烧自己</p>
			    <p>只为照亮你</p>
			    <p>把我一切都献给你</p>
			    <p>只要你欢喜</p>
			    <p>你让我每个明天都</p>
			    <p>变得有意义</p>
			    <p>生命虽短爱你永远</p>
			    <p>不离不弃</p><br>
			    <p>你是我的小呀小苹果儿</p>
			    <p>怎么爱你都不嫌多</p>
			    <p>红红的小脸儿温暖我的心窝</p>
			    <p>点亮我生命的火 火火火火</p>
			    <p>你是我的小呀小苹果儿</p>
			    <p>就像天边最美的云朵</p>
			    <p>春天又来到了花开满山坡</p>
			    <p>种下希望就会收获</p><br>
			    <p>从不觉得你讨厌</p>
			    <p>你的一切都喜欢</p>
			    <p>有你的每天都新鲜</p>
			    <p>有你阳光更灿烂</p>
			    <p>有你黑夜不黑暗</p>
			    <p>你是白云我是蓝天</p><br>
			    <p>春天和你漫步在盛开的 花丛间</p>
			    <p>夏天夜晚陪你一起看 星星眨眼</p>
			    <p>秋天黄昏与你徜徉在 金色麦田</p>
			    <p>冬天雪花飞舞有你 更加温暖</p><br>
			    <p>你是我的小呀小苹果儿</p>
			    <p>怎么爱你都不嫌多</p>
			    <p>红红的小脸儿温暖我的心窝</p>
			    <p>点亮我生命的火 火火火火</p>
			    <p>你是我的小呀小苹果儿</p>
			    <p>就像天边最美的云朵</p>
			    <p>春天又来到了花开满山坡</p>
			    <p>种下希望就会收获</p><br>
			    <p>你是我的小呀小苹果儿</p>
			    <p>怎么爱你都不嫌多</p>
			    <p>红红的小脸儿温暖我的心窝</p>
			    <p>点亮我生命的火 火火火火</p>
			    <p>你是我的小呀小苹果儿</p>
			    <p>就像天边最美的云朵</p>
			    <p>春天又来到了花开满山坡</p>
			    <p>种下希望就会收获</p>
	    	</div>
	    </div>
	</div>
</body>
</html>