监听滚动条事件

最新推荐文章于 2024-03-07 13:28:46 发布

炸_洋芋

最新推荐文章于 2024-03-07 13:28:46 发布

阅读量5.4k

点赞数

分类专栏： JavaScript 文章标签：滚动条监听滚动条原理 jQuery niceScroll

本文链接：https://blog.csdn.net/zhaoxiang66/article/details/76573868

版权

JavaScript 专栏收录该内容

24 篇文章 4 订阅

订阅专栏

以前博主并不知道滚动条是怎样的原理，看了一篇博客，明白了滚动条滚动的原理，下面我来说一说滚动条的原理：

首先理解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。

clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。

offsetHeight：是指元素内容的高度。依照上面的，那这个高度呢就是DIV内部的高度，包括可见部分及以滚动条下面的不可见部分。

scrollTop：这个是什么呢？他可以理解为滚动条可以滚动的长度。

举例，如果一个DIV高度是400px（即clientHeight为400），而里面的内容是一个很长的列表，内容的高度是1000px（即offsetHeight为1000）。那么，可见部分我们看到400px，1000px的内容中还有600px不可见。而这不可见的部分呢，正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动，此时scrollTop为0，如果你把滚动条拉到底，显示出列表最下面的部分，此时，scrollTop为600。　所以scrollTop的取值区间为[0, 600]。　所以这个600可以理解为滚动条可以滚动的长度。

理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。

看完滚动条的原理之后，我就用了上次那个niceScroll的插件，其实那个插件就是把原生的滚动条改了样式，其实实质还是原生滚

动条，不过它用jQuery把它的兼容性做的很好了，现在演示代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#d1{
			width: 200px;
			height:300px;
			overflow: auto;
			border:1px solid #ddd;
			margin: auto;
			padding:10px;
		}
		#d2,#d3{
			height:1000px;
		}
	</style>
</head>
<body>
	<div id = "d2">
		
	</div>
	<div id = "d1">
		<div id = "d4">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>
	</div>
	<div id = "d3">
		
	</div>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
	<script type="text/javascript">
		$("#d1").niceScroll({
			cursorcolor: "#75BCE1",
		});
		
		console.log($("#d4").scrollHeight);
		$("#d1").scroll(function(){
			console.log($("#d1").scrollTop());
			console.log('可见高度',$("#d1").height());//容器高度
			console.log('内容高度',$("#d4").height());//内容高度
			if($("#d1").scrollTop() >= ($("#d4").height() - $("#d1").height())){
				console.log('到底部啦'); //如果滚动条滚动高度 >= 内容高度 - 容器高度，就说明到底部了
			}
		})
	</script>
</body>
</html>

但是火狐好像没有把padding算在里面，需要把padding算在里面，ok监控滚动条监听事件也搞定了！

炸_洋芋

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
监听滚动条事件

以前博主并不知道滚动条是怎样的原理，看了一篇博客，明白了滚动条滚动的原理，下面我来说一说滚动条的原理：首先理解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。clientHeight：这个元素的高度，占用整个空间的高度，所以，如果一个div有滚动条，那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。offsetHeigh
复制链接

扫一扫