滚动条三要素scrollTop clientHeight scrollHeight

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


<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;">111111div>
				<div style="height: 500px;background:green">222222div>
				<div style="height: 500px;background: dodgerblue;">33333div>
			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'})
		}
	})
}

你可能感兴趣的:(前端)