• js中 scrollHeight、clientHeight、scrollTop的理解

    前段时间，自己手写了一个滚动触底加载数据的功能。当时由于时间紧迫，所以也就只是在网上找了一段代码贴上去。也没有很深入的去研究。今天有空，所以自己特意去研究了下它的原理。
    滚动触底加载数据，之前我也有写过博客，如果有需要，可以去看我之前写的博客 【https://blog.csdn.net/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 xiaobingp>
		<p>this is xiaobing my age is 17 and my name is xiaobingp>
		<p>this is xiaobing my age is 17 and my name is xiaobingp>
		<p>这儿有很多个p标签，我只是做个举例p>
	div>
div>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    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
    • 2
    • 3
    • 4
    • 5
    • 6

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

    //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;
		}
	}
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

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

    //前面的还是一样的，监听页面的滚动事件
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 (也就是页面内容的总高度），所在，在这儿做判断是最合理的。
		//这儿是请求数据的逻辑
		//接下来的逻辑也跟上面的差不多
	}
})


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

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

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

    <body>
	<div>
		<div>
			<h1>helloh1>
			<h1>helloh1>
			<h1>helloh1>
			<h1>helloh1>
			<h1>helloh1>
			<h1>helloh1>
			<h1>helloh1>
			<h1>helloh1>
			<h1>helloh1>
		div>
		<div id="div2">ccccsdiv>
	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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
  • 相关阅读:
    windows下一键安装JDK1.8
    Docker安装mysql 5.7主从复制
    模块化设计瞎谈
    Centos8安装docker并配置Kali Linux图形化界面
    是顺流还是逆流？未来物流作业是否将被机器人全面取代？
    php+vue3实现点选验证码
    ORA-03113：通信通道的文件结尾-完美解决方案
    灰色预测 Python
    Qt工程打包工具 windeployqt 的用法
    Matlab学习笔记
  • 原文地址：https://blog.csdn.net/weixin_42371812/article/details/126673431