js之滚动条+鼠标滚轮实现滚动效果

57 阅读 0 评论 38 点赞

我是靠谱客的博主务实宝马，最近开发中收集的这篇文章主要介绍js之滚动条+鼠标滚轮实现滚动效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#box {
				position: relative;
				width: 300px;
				height: 500px;
				border: 1px solid red;
				margin: 20px auto;
				overflow: hidden;
			}

			#content {
				position: absolute;
				top: 0;
				left: 0;
				padding: 5px 18px 5px 5px;
			}

			#scroll {
				position: absolute;
				top: 0;
				right: 0;
				width: 18px;
				height: 100%;
				background-color: #00ADEF;
			}

			#bar {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100px;
				background-color: red;
				border-radius: 10px;
				cursor: pointer;
			}
		</style>
	
	</head>
	<body>
		<div id="box">
			<div id="content">
				我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容我是一段内容
			</div>
			<div id="scroll">
				<div id="bar"></div>
			</div>
		</div>
	</body>
</html>

js代码

window.onload = function() {
	var box = document.getElementById('box');
	var txt = document.getElementById('content');
	var scr = document.getElementById('scroll');
	var bar = document.getElementById('bar');
	//根据实际内容设置 滚动条的高度 = (盒子的高度 / 内容的高度) * 盒子的高度
	var barLen = (box.clientHeight / txt.clientHeight) * box.clientHeight;
	bar.style.height = barLen + 'px';

	var y = null;
	//当鼠标按下
	bar.onmousedown = function(e) {
		var ev = window.event || e;
		//计算鼠标位置 差
		var a = ev.clientY - this.offsetTop;
		//拖动滚动条
		document.onmousemove = function(e) {
			var ev = window.event || e;
			//获取鼠标位置
			y = ev.clientY - a;
			roll();
		}
        return false; //阻止默认行为
	}

	//滚动
	function roll() {
		//限制区域
		if (y <= 0) {
			y = 0;
		} else if (y >= scr.clientHeight - bar.clientHeight) {
			y = scr.clientHeight - bar.clientHeight;
		}
		//设置 滚动条
		bar.style.top = y + 'px';
		// 滚动条 / 盒子的长度 = 盒子的长度 / 内容的长度
		//设置 内容滚动 = (内容的长度 - 盒子显示内容的长度）/ (盒子显示内容长度 - 滚动条的长度) * 滚动条走的距离
		var txtLen = (txt.offsetHeight - box.clientHeight) / (box.clientHeight - bar.offsetHeight) * y;
		txt.style.top = -txtLen + 'px';
		//return false; //阻止默认行为
	}

	//鼠标悬停box 滚动
	box.onmousewheel = function(e) {
		var ev = window.event || e;
		//监听滚轮 方向
		if (ev.wheelDelta > 0) {
			//上
			y -= 16;
			roll();
		} else {
			//下
			y += 16;
			roll();
		}
	}

	//松开鼠标时
	document.onmouseup = function() {
		document.onmousemove = null;
	}

}