滚动条三要素scrollTop clientHeight scrollHeight

65 阅读 0 评论 43 点赞

我是靠谱客的博主爱笑方盒，最近开发中收集的这篇文章主要介绍滚动条三要素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