滚动条三要素scrollTop clientHeight scrollHeight

大家好，又见面了，我是你们的朋友全栈君。

插件
https://github.com/inuyaksa/jquery.nicescroll

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css"> html,body{ 
     width: 100%; overflow: hidden; } *{ 
     margin: 0; padding: 0; } .wrap{ 
     width: 100%; height: 1500px; background: #00BFFF; } .twowrap{ 
     width: 100%; height: 1500px; background: #009688; } </style>
	</head>
	<body>
		<div class="wrap">
			
		</div>
		<div class="twowrap">
			
		</div>
	</body>
	<script type="text/javascript"> //我的方法是把原先的滚动条隐藏 然后通过设置scroll来控制滑动，不同的浏览器获得scroll的方法不同，具体看下面那个代码块 $("body").on("mousewheel",function(event){ 
     console.log(document.documentElement.scrollTop); if(document.documentElement.scrollTop < 0){ 
     document.documentElement.scrollTop = 0; }else{ 
     if(event.originalEvent.deltaY > 0){ 
     document.documentElement.scrollTop = document.documentElement.scrollTop + 100; }else if(event.originalEvent.deltaY < 0){ 
     document.documentElement.scrollTop = document.documentElement.scrollTop - 100; } } }) </script>
</html>

//变量scrollTop是滚动条滚动时，距离顶部的距离
		 	  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		 	  //变量windowHeight是可视区的高度
		 	  var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
		 	  //变量scrollHeight是滚动条的总高度
		 	  var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
		 	  //滚动条到底部的条件
		 	  if (scrollTop + windowHeight == scrollHeight) { 
   
		// //写后台加载数据的函数 
		// }

滚动条的样式设置

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
			::-webkit-scrollbar { 
   
				height: 10px;
    			width: 10px;
   			    background-color: #fff;
			}

			/*定义滚动条轨道 内阴影+圆角*/
			::-webkit-scrollbar-track { 
   
				
				border-radius: 10px;
				background-color: #F5F5F5;
			}

			/*定义滑块 内阴影+圆角*/
			::-webkit-scrollbar-thumb { 
   
				padding-top: 100px;
				-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px -1px 0 rgba(0, 0, 0, .07);
				background-color: #dadada;
				min-height: 26px;
				border-radius: 4px;
			}

下面这个demo是自制滚动条，包括滚动条的拖动和内容区的滚动，目前还没有加入click事件，只能上下滚动（写的我腰疼）

html

<div class="leftNavWrap">
	<div class="leftNav">
		<div class="topNav leftNavScroll">
			<div class="scrollbarWrap">
				<div class="scrollbar">
					<div id="scrollSlider">
						
					</div>
				</div>
			</div>
			<div class="leftNavList" style="width: 97%;height: 1500px;">
				<div style="height: 500px;background: gray;">111111</div>
				<div style="height: 500px;background:green">222222</div>
				<div style="height: 500px;background: dodgerblue;">33333</div>
			</div>
		</div>
		<div class="bottomNav">
			
		</div>
	</div>
</div>

css

.leftNavWrap{ 
   
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
}
.leftNav{ 
   
	position: relative;
	height: 100%;
	width: 240px;
	background: #000000;
	overflow: hidden;
}
.topNav{ 
   
	position: relative;
	width: 100%;
	background: #38393e;
	margin-top: 61px;
	overflow-y: hidden;
}
.topNav::-webkit-scrollbar{ 
   
	width: 7px;
	height: 8px;
	background: #38393e;
}
.topNav::-webkit-scrollbar-thumb{ 
   
	border-radius: 5px;
	background: #73757b;
}

.bottomNav{ 
   
	position: relative;
	width: 100%;
	height: 150px;
	background: #FF9600;
	margin-top: 2px;
}



/**************自制滚动条*****************/
.scrollbarWrap{ 
   
	position: absolute;
	background: #FFFFFF;
	right: 0;
	top: 0;
	height: 100%;
	width: 7px;
}
.scrollbar{ 
   
	position: relative;
	height: 100%;
	width: 100%;
}
#scrollSlider{ 
   
	width:100%;
	position: relative;
	top:0;
	border-radius: 5px;
	background: #73757b;
}

js

(function(){ 
   
	setTopNavH()
	setScrollSlider()
})()

function setTopNavH(){ 
   
	let height = window.innerHeight - 130;
	$('.topNav').css({ 
   'height':height+'px'})
	
	$(window).resize(function(){ 
   
		height = window.innerHeight - 130;
		$('.topNav').css({ 
   'height':height+'px'})
		
	})
}

function setScrollSlider(){ 
   
	//记录最开始的元素的高度。。。在改变margin的时候元素的高度会跟着改变
	let elementHeight = $('.topNav')[0].scrollHeight;
	//滚动条的总长度
	let sHeight = $('.topNav')[0].scrollHeight;
	//可见高度
	let oHeight = $('.topNav')[0].offsetHeight;
	//百分比
	let a = oHeight/sHeight;
	//滑块高度
	let sliderHeight = oHeight * a;
	$('#scrollSlider').css({ 
   'height': sliderHeight + 'px'})
	
	$(window).resize(function(){ 
   
		let top = $('.leftNavList').css('marginTop').replace('px','');
		top = -parseInt(top);
		//滚动条的总长度
		sHeight = $('.topNav')[0].scrollHeight + top;
		//可见高度
		oHeight = $('.topNav')[0].offsetHeight;
		//百分比
		a = oHeight/sHeight;
		//滑块高度
		sliderHeight = oHeight * a;
		console.log(sHeight + ":::" + oHeight+"::::" +sliderHeight)
		$('#scrollSlider').css({ 
   'height': sliderHeight + 'px'})
	})
	
	$('.topNav').on('mousewheel',function(e){ 
   
		e = e || window.event; 
		//滚动条的总长度
		sHeight = $('.topNav')[0].scrollHeight;
		//可见高度
		oHeight = $('.topNav')[0].offsetHeight;
		let scrollY = e.originalEvent.deltaY;
		let sliderTop = $('#scrollSlider').css('marginTop').replace('px','');
		let sliderHeight = $('#scrollSlider').css('height').replace('px','');
		let navListTop = $('.leftNavList').css('marginTop').replace('px','');
		sliderTop = parseInt(sliderTop);
		sliderHeight = parseInt(sliderHeight);
		navListTop = parseInt(navListTop);
		
		if(scrollY > 0){ 
   
			sliderTop += oHeight/15;
			navListTop -= sHeight/14;
			if(sliderTop >= oHeight - sliderHeight){ 
   
				sliderTop = oHeight - sliderHeight;
				navListTop = oHeight - elementHeight;
			}
			$('#scrollSlider').css({ 
   'marginTop': sliderTop+'px'})
			$('.leftNavList').css({ 
   'marginTop': navListTop+'px'})
		}else{ 
   
			sliderTop -= oHeight/15;
			navListTop += sHeight/14;
			if(sliderTop <= 0){ 
   
				sliderTop = 0;
				navListTop = 0;
			}
			$('#scrollSlider').css({ 
   'marginTop': sliderTop + 'px'})
			$('.leftNavList').css({ 
   'marginTop': navListTop+'px'})
		}
	})
}