scrollHeight,clientHeight,scrollTop

最新推荐文章于 2024-01-15 22:28:00 发布
最新推荐文章于 2024-01-15 22:28:00 发布
阅读量1.4k 收藏 10
点赞数 7
分类专栏： css 文章标签： css js html
原文链接：https://www.jianshu.com/p/c59b2ccc963c
版权
移动端加载数据时，常采用滑动滚动条到内容最后加载更多的方式。本文介绍了用原生js实现该功能的思路，涉及scrollHeight、scrollTop、clientHeight三个高度，当clientHeight + scrollTop >= scrollHeight时可加载更多，还附上了jquery的实现方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

移动端加载数据时，由于数据太多，不会一次性全部加载出来。有些会采用pc端那样用分页码的形式，但是更多的确实滑动滚动条到内容最后，加载更多内容出来。一般引入了三方的前端框架和插件，基本都会有此功能。偶尔会需要采用原生js实现，故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。

原生js实现思路
需要三个高度：
scrollHeight（文档内容实际高度，包括超出视窗的溢出部分）、
scrollTop（滚动条滚动距离）、
clientHeight（窗口可视范围高度）。

当 clientHeight + scrollTop >= scrollHeight 时，表示已经抵达内容的底部了，可以加载更多内容。

scrollHeight：可以通过 document.documentElement.scrollHeight 、document.body.scrollHeight 获取;
clientHeight：可以通过window.innerHeight 、 document.documentElement.clientHeight 获取;
scrollTop：可以通过window.pageYOffset 、 document.documentElement.scrollTop 获取;

在这里插入图片描述

作者：郭先生_515
链接：https://www.jianshu.com/p/c59b2ccc963c
来源：简书

手写一个滚动加载，scrollHeight、scrollTop与clientHeight傻傻分不清
weixin_38434088的博客
03-22 911
文章目录前言一、scrollHeight? scrollTop? clientHeight？二、实现步骤1.HTML&CSS部分2.js部分总结 前言 这是某厂的一道前端笔试题，做题的时候对滚动相关的这几个参数搞混了导致没能实现滚动加载的效果，在这里记录一下。 提示：以下是本篇文章正文内容，下面案例可供参考 一、scrollHeight? scrollTop? clientHeight？ 一图胜千言，下面直接上图来区分三个属性 蓝色部分可以看见的窗口部分，clientHeight代表了这块的
关于js在chrome游览其中滚动事件scrollHeight - scrollTop得出的值为小数的解决方法
MrEres_code的博客
04-10 1399
1.关于js在chrome游览其中滚动事件scrollHeight - scrollTop得出的值为小数的解决方法 代码 // An highlighted block window.onload = function() { //获取id标签元素 var info = document.getElementById("info"); //绑定滚动事件 info.onscroll = function() { //测试数值 var a = info.scrollHeight - info.sc
根据例子来理解scrollHeight,clientHeight,scrollTop的区别
01-14
包含以下内容： function test(){ var infoHeight = document.getElementById(”info”).scrollHeight; //scrollHeight 为层实际的高度，有实际有多高就多高，与当前网页高度无关。
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop
热门推荐
qq_35430000的博客
05-11 16万+
转载自：https://www.imooc.com/article/17571网页可见区域高：document.body.clientHeight网页正文全文高：document.body.scrollHeight网页可见区域高（包括边线的高）：document.body.offsetHeight网页被卷去的高：document.body.scrollTop屏幕分辨率高：window.screen...
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 4033
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
js中 scrollHeight、clientHeight、scrollTop的理解
weixin_42371812的博客
09-03 867
滚动触底加载数据，之前我也有写过博客，如果有需要，可以去看我之前写的博客 【https://blog.youkuaiyun.com/weixin_42371812/article/details/126450708】前段时间，自己手写了一个滚动触底加载数据的功能。今天有空，所以自己特意去研究了下它的原理。所谓的懒加载，就是在页面上先用一个静态的图片做一个占位符，等滚动那个图片位置的时候，再从后端请求数据，把真实的图片放到页面上。那么，这儿，我也就只说下我的大概思路，说的不好请大家在评论区里指出来。
【JS】scrollTop+scrollHeight+clientTop+clientHeight+offsetTop+offsetHeight
cannotbecounted的博客
11-08 581
scrollTop+scrollHeight+clientTop+clientHeight+offsetTop+offsetHeight
scrollheight和scrolltop
最新发布
10-16
这个值通常大于等于`clientHeight`（可见区域高度），因为`scrollHeight` 包含了滚动条所占用的空间。 `scrollTop` 则是另一个元素的属性，它表示当前视口在垂直方向上滚动的距离，是从顶部开始测量的。当用户滚动...
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决
郑伟斌的博客
04-09 2万+
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决1.什么是clientHeight、scrollHeight和offsetHeight1.1 clientHeight是什么1.2 offsetHeight是什么1.3 clientHeight和offsetHeight的注意点1.4 scrollHeight和它的大坑jQuery和原生js...
花点时间记住scrollTop、clientHeight、offsetTop、scrollHeight
qq_40574071的博客
07-20 1956
一、经典图解读 先放上一张经典图 看不懂，没关系！接下来耐心看完必然有不一样的收获。 我们常遇到的是实际是这么几个属性： offsetTop clientHeight scrollTop scrollHeight 如果不把它们弄清楚就会导致每次遇到时都混淆不清，下面就逐一看看这么些属性。 （1）offsetTop HTMLElement.offsetTop为只读属性，它返回当前元素相对于其offsetParent元素的顶部内边距的距离。--MDN 【巧记】offset本身就是..
浏览器 滚动条 clientHeight、offsetHeight、scrollTop。
黄彪博客
09-07 574
文章参考 http://www.jb51.net/article/57614.htm http://www.jb51.net/article/58688.htm http://www.internetke.com/tutorial/js/2014/0523/560.html     需要了解三个dom元素，分别是：clientHeight、offsetHeight、scrollTop。
关于offsetTop，scrollTop，scrollHeight，clientHeight
xiaobaiya___的博客
01-15 768
scrollTop：可视区域顶部到文档流顶部的距离，也是滚动条滚动的距离。offsetTop：元素到offsetParent顶部的距离。scrollHeight：文档内容实际高度，clientHeight：窗口可视范围高度。包括超出视窗的溢出部分。
srcollTop、clientHeight、scrollHeight详解
记录点滴
10-16 1001
原生js： scrollTop —— 滚动条滚动的距离（注意：不是滚动条距顶端的距离） scrollHeight —— 文档内容的实际高度，包含超出视图溢出的部分 clientHeight —— 窗口可视范围的高度 当clientHeight + scrollTop >= scrollHeight时，表示已经抵达内容的底部了，可以加载更多内容。 scrollTop： 可以通过 window.pageYOffset 或 document.documentElement.scro...
clientHeight、offsetHeight、scrollHeight、scrollTop的区别以及上拉加载的实现
weixin_40380115的博客
06-11 2196
在前端的项目中，为了提高性能经常会使用到上拉加载，、、、是实现上拉 加载的关键。所以，首先来介绍下三者的意义以及区别。 ：表示的是当前显示的元素的高度，如果存在X轴的滚动条与根元素边框，不包括X轴的滚动条与根元素边框的高度 。 ：也表示的是当前显示元素的高度，与clientHeight类似，但offsetHeight包括X轴的滚动条与根元素边框的高度。 ：表示内容区域的整个高度，包括溢出的内容区域，即滚动条的 高度。 ：表示的是滚动条滚动的高度，初始未滚动时的高度为0。 具体如下图所示： 有上图可知：of
页面scroll的高度
weixin_42729843的博客
02-28 714
在做项目时有很多时候需要根据页面的scroll高度做一些操作 获取某元素的的高度：element.clientHeight 获取视图的滚动高度：element.scrollTop（菜鸟的解释：返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离） 滚动到指定元素（better-scroll）：this.scroll.scrollToElement(element) ...
前端中的scrollHeight 、scrollTop、clientHeight等意思
jjw_zyfx的博客
10-25 3972
要记住 通过 标签.style.width是获取不到宽度的，如果必须要获取可以通过clientWidth，或者是offsetWidth 完成这个动作需要先知道三个高度： scrollHeight 文档内容实际高度，包括超出视窗的溢出部分 scrollTop 滚动条距元素(不一定是屏幕最顶端)顶部滚动的距离 clientHeight窗口可视范围高度（就是自己能看到的高度，如果这...
终于清晰啦！offsetHeight、scrollHeight、clientHeight和offsetTop、scrollTop、clientTop
特大号虾米的博客
10-17 2707
一、offsetHeight、scrollHeight、clientHeight l你好ll白布a隐隐约约隐隐约约隐隐约约 var tDiv = document.getElementById('div2'); console.log("clientHeight:
Js——ScrollTop、ScrollHeight、ClientHeight、OffsetHeight汇总
CaseyWei
06-17 6980
一直对ScrollTop、ScrollHeight、ClientHeight、OffsetHeight这些内容傻傻分不清楚，今天整体下。 scrollHeight scrollHeight含有scroll当然这个高度与滚动相关。 读写：只读 描述：包括overflow样式属性导致的视图中不可见内容，没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值c...
滚动条三要素scrollTop clientHeight scrollHeight
hot_boom_dog的博客
08-07 1364
<!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"></s...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值