原生JS写自定义滚动条！附带完整代码+思路

一、布局思路

一个大盒子-->box，

左边一个div-->con中用来放content，
右边一个div-->scroll里面套一个div-->bar用来写滚动条。
共计4个div

二、先确定bar的高度

bar的高度要随着content中的内容的变化而变化。
即有一个比例关系： bar的高度/scroll的高度 = box的高度/con的高度，求出bar的高度

三、让bar动起来

原理同上面的放大镜和拖拽，即当点击的时候，获取当前的鼠标位置，减去当前的offsetleft
即可得到鼠标点在元素上的位置(space)，当移动的时候，用现在的鼠标位置减去space即可得到
元素的left位置。设置即可。

四、给bar设置可以移动的范围，确保在scroll里移动

最小为 0

最大为scroll的高度减去bar的高度。

五、让bar动的时候，con也动，且动的方向跟bar相反

此时存在一个比例关系：即bar的运动距离 / bar的总运动范围 = con的运动距离 / con的总的运动范围
因此 con的运动距离为 = bar的运动距离 / bar的总运动范围 * con的总的运动范围
算出距离后，使用marginTop即完成，注意，值需要为负值。

六、优化

设置

window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();

注意设置在onmousemov里面即可设置在滚动的时候选不中文字。

完整代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>自定义滚动条</title>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
	}
	#box {
		width: 300px;
		height: 500px;
		border: 1px solid red;
		margin: 300px;
		overflow: hidden;
	}
	#content {
		width: 266px;
		float: left;
	}
	#scroll {
		width: 30px;
		height: 100%;
		float: right;
		border: 1px solid lime;	
		position: relative;
	}
	#bar {
		width: 30px;
		background-color: purple;
		border-radius: 25px;
		position: absolute;
		top: 0;
	}
</style>
<body>
<div id="box">
	<div id="content">
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，
		床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光，床前明月光
	</div>
	<div id="scroll">
		<div id="bar"></div>
	</div>
</div>
<script>
	var oBox = document.getElementById("box");
	var oCon = document.getElementById("content");
	var oScroll = document.getElementById("scroll");
	var oBar = document.getElementById("bar");
	//bar的高度为，bar高度/scroll的高度 = box的高度/content的高度
	//bar高度 = box的高度*scroll的高度/content的高度
	var height = parseInt(oBox.offsetHeight * oScroll.offsetHeight) / parseInt(oCon.offsetHeight);
	oBar.style.height = height + "px";
	oBar.onmousedown = function (e) {
		var cY = parseInt(e.clientY);
		var oH = parseInt(this.offsetTop);
		var spaceY = cY - oH;
		document.onmousemove = function (e) {
			//鼠标移动时，不选中文字
			window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
			// var nowX = e.clientX;
			var nowY = parseInt(e.clientY);
			// var x = nowX - spaceX;
			var y = nowY - spaceY;
			// oBar.style.left = x + "px";
			//比例问题：bar的移动距离/bar的可以移动的距离 = content的移动距离 / content可以移动的距离
			//content的移动距离 = y/bar的可以移动的距离 * content可以移动的距离
			var baHeight = parseInt(oScroll.offsetHeight - oBar.offsetHeight);

			y = y<0?y=0:y;
			y = y>baHeight?baHeight:y;

			var conHeight = parseInt(oCon.offsetHeight - oBox.offsetHeight);

			var conY = y * conHeight / baHeight ;
			oBar.style.top = y + "px";
			oCon.style.marginTop = -conY + "px";
		}
	}
	document.onmouseup = function () {
		document.onmousemove = null;
	}
</script>
</body>
</html>

原生JS写自定义滚动条！附带完整代码+思路

猜你喜欢