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 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>

js中 scrollHeight、clientHeight、scrollTop的理解相关推荐

JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
一.先介绍clientHeight与scrollHeight的区别 clientHeight: 在页面上返回内容的可视高度(不包括边框,边距或滚动条) scrollHeight: 返回整个元素的高度( ...
[js] 说说你对JS中暂性死区的理解，它有什么运用场景？
[js] 说说你对JS中暂性死区的理解,它有什么运用场景? var v=1; {v = 2;let v; }这里候会报错: Cannot access 'v' before initializatio ...
【javascript】clientHeight，offsetHeight，scrollHeight，scrollTop的理解，以及触底函数
1.clientHeight 含义:元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距图示: 2.offsetHeight 含义:元素的像素高度包含元素的垂直内边距和边框,水平 ...
js中对于数据类型的一些理解
Typeof的作用: 返回数据的类型基本数据类型(Number String Boolean null undefined es6种新增的一个基本数据symbol) Let num = 22 Ty ...
java js中 function函数报错_浅析JS中对函数function的理解(基础篇)
正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定 ...
js中变量作用域的小理解
一:变量作用域在js代码中每个变量都是有自己的作用域的,js中不像C语言有块级作用域的概念,取而代之的是函数作用域,看如下代码: var scope="global"; func ...
js中prototype，constructor的理解
连看4篇前辈的文章,记录一些知识点 Javascript继承机制的设计思想 Javascript 面向对象编程(一):封装 Javascript面向对象编程(二):构造函数的继承 Javascript ...
js中的浅拷贝深拷贝深入理解
举个例子来说明一下什么是浅拷贝什么是深拷贝浅拷贝 var x = {a: 1,b: {f: {g: 1}},c: [1, 2, 3] }; var y = shallow(x); 得出的结果可以看出 ...
【JS中scrollHeight/Width详解（不加定位的情况下）】
scrollHeight和scrollWidth的详解一. 内容块Y轴上没有超出的情况下二.内容块Y轴上有超出的情况下 2.1 当 overflow-y: visible的情况 2.2 设置ove ...

js中 scrollHeight、clientHeight、scrollTop的理解

js中 scrollHeight、clientHeight、scrollTop的理解相关推荐

最新文章

热门文章