js中 scrollHeight、clientHeight、scrollTop的理解

原创已于 2022-09-03 14:21:01 修改 · 909 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css

于 2022-09-03 09:50:57 首次发布

前端专栏收录该内容

22 篇文章

订阅专栏

本文详细解析滚动触底加载数据的原理，涉及scrollHeight、clientHeight和scrollTop属性，并介绍图片懒加载策略，以及如何在iframe场景下处理滚动条问题。通过实例演示了滚动事件监听和数据请求的逻辑。

前段时间，自己手写了一个滚动触底加载数据的功能。当时由于时间紧迫，所以也就只是在网上找了一段代码贴上去。也没有很深入的去研究。今天有空，所以自己特意去研究了下它的原理。
滚动触底加载数据，之前我也有写过博客，如果有需要，可以去看我之前写的博客【https://blog.youkuaiyun.com/weixin_42371812/article/details/126450708】
但今天我不讲这事儿，我需要讲的就是在滚动中使用到的几个属性 scrollHeight、clientHeight、scrollTop。

<div id='app'>
	<div style="height: 300px; width: 100%; overflow-y:scroll;" id="mydiv">
		<p>this is xiaobing my age is 17 and my name is xiaobing</p>
		<p>this is xiaobing my age is 17 and my name is xiaobing</p>
		<p>this is xiaobing my age is 17 and my name is xiaobing</p>
		<p>这儿有很多个p标签，我只是做个举例</p>
	</div>
</div>

var mydiv = document.getElementById('mydiv');
mydiv.addEventListener('scroll',function(e){
	let scrollHeight = this.scrollHeight; //内容的总高度（也就是整个div的高度，）
	let clientHeight = this.clientHeight; //盒子高度(也就是你在css里设置的高度，同时，如果有padding的值也需要加上。)
	let scrollTop = this.scrollTop;  //滚动条距离顶部的距离 (可以设置) 设置的代码 mydiv.scrollTop = 150; 后面不需要加单位
})

其实，这三个属性还有它一些好玩的事儿。我就简单讲解一下下
我们都知道，现在很多网站都会有图片懒加载。所谓的懒加载，就是在页面上先用一个静态的图片做一个占位符，等滚动那个图片位置的时候，再从后端请求数据，把真实的图片放到页面上。
那么，这儿，我也就只说下我的大概思路，说的不好请大家在评论区里指出来

//1、首先，我们需要对滚动事件进行监听
let flg = false;
document.addEventListener('scroll',function(){
		//谷歌支持前面 document.documentElement.scrollTop,  document.body.scrollTop 兼容老版本的浏览器
	let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; ////这个值就是滚动时距离页面顶部的距离
	//假如存放图片的盒子距离页面顶部在1500的位置。那么，我们就可以这样子整
	if(scrollTop >= 1500){
		//当前，在这个监听事件前面，我们还需要有一个变量来存放是否已经请求过，不然，会造成很多次的请求。
		if(!flg){ 
			//这作做请求数据的逻辑
			//请求完成后，记得把flg变量重置为true;
			flg = true;
		}
	}
})

那么，我现在次回来，再来理解最开始讲的滚动触底请求数据。那就好理解多了。

//前面的还是一样的，监听页面的滚动事件
let flg = false;
document.addEventListener('scroll',function(){
		//谷歌支持前面 document.documentElement.scrollTop,  document.body.scrollTop 兼容老版本的浏览器
	let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //这个值就是滚动时距离页面顶部的距离,每次滚动都会变化
	let clientHeight = document.documentElement.clientHeight; //这个就是浏览器的高度，这个值每次滚动是不会变的。(这个值就是你用微信截图，放到页面上的那个高度)
	let scrollHeight = document.documentElement.scrollHeight; //这个就是页面内容的总高度，每次滚动如果在没有数据插入的情况下，它的值是不会变的。
	if(scrollTop + clientHeight >= scrollHeight){ //它的意思就是 滚动时页面离顶部的距离 + 浏览器的高度。因为每次滚动会变会的是scrollTop ,而如果滚动的最底部，在没有数据加载进入的情况下，他们的结果是相等于 scrollHeight (也就是页面内容的总高度），所在，在这儿做判断是最合理的。
		//这儿是请求数据的逻辑
		//接下来的逻辑也跟上面的差不多
	}
})

既然说到了滚动，那我也就多说一句，在实际开发中，都会运用到 iframe的情况。而在用上iframe后，如果不加于修饰，都会出现一个滚动条。针对这个问题。我们也是有办法去解决的。很简单，只需要一个简单的css 就能搞定
在ifram的那个页面上。不是父页面。是子页面

::-webkit-scrollbar { 
     display: none; /*谷歌和苹果没毛病*/

   }
html{
	-ms-overflow-style: none; /* IE 10+ */
      scrollbar-width: none; /* Firefox */
}
/*所以，实际开发中，这两个都需要写上 固定写法，请不要自己瞎写*/

下面这一段是自己模拟的懒加载，大家可以根据自己的需求进行修改

<body>
	<div>
		<div>
			<h1>hello</h1>
			<h1>hello</h1>
			<h1>hello</h1>
			<h1>hello</h1>
			<h1>hello</h1>
			<h1>hello</h1>
			<h1>hello</h1>
			<h1>hello</h1>
			<h1>hello</h1>
		</div>
		<div id="div2">ccccs</div>
	</div>


	<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		(function(){
			let flg = false; //先定义一个变量用于后面请求数据后的关闭
			async function getd(){
				return new Promise((resolve,reject)=>{
					$.ajax({
						url:'./getDa',
						data:{},
						async:false,
						dataType:'json',
						success:function(e){
							resolve(e)
						}
					})
				})		
			}
			document.addEventListener('scroll',fn);
			async function fn(){
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //谷歌支持前面 document.documentElement.scrollTop,  document.body.scrollTop 兼容老版本的浏览器
				if(scrollTop >= 200){
					if(!flg){
						console.log(scrollTop,'请求')
						let d = await getd();
						console.log(d)
					}
					flg = true; //注意这儿需要把它设置为true,不然，每滚动一次就会请求一次数据
				}
			}
		})();

		(function(){
			let div2 = document.getElementById('div2');
			let h = div2.offsetTop; //获取某个元素距离页面顶部的距离
			console.log(div2,h)
		})();
	</script>
</body>