关于offsetTop，scrollTop，scrollHeight，clientHeight

原创 于 2024-01-15 22:28:00 发布 · 825 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html

本文解释了JavaScript中用于处理滚动位置的四个关键属性：offsetTop（元素到offsetParent顶部距离）、scrollTop（可视区域顶部到文档流顶部距离），scrollHeight（文档内容实际高度，包括溢出部分）和clientHeight（窗口可视范围高度）。当clientHeight加上scrollTop等于scrollHeight时，意味着已到达内容底部，可用于实现滚动加载更多内容。

offsetTop：元素到offsetParent顶部的距离

 scrollTop：可视区域顶部到文档流顶部的距离，也是滚动条滚动的距离

scrollHeight：文档内容实际高度， 包括超出视窗的溢出部分 

clientHeight：窗口可视范围高度

  • 当 clientHeight + scrollTop >= scrollHeight 时，表示已经抵达内容的底部了，可以加载更多内容。
xiaobaiya___
关注
scrollTop与offsetTop解决小分辨率区域块向上滚动效果效果，结合animation与@keyframes实现标题左右闪动更换颜色效果。
qq_63322025的博客
01-10 1444
scrollTop ，offsetTop ，@keyframes ，animation等属性实现一个点击动态滚动标题闪动效果
手写一个滚动加载，scrollHeight、scrollTop与clientHeight傻傻分不清
weixin_38434088的博客
03-22 972
文章目录前言一、scrollHeight? scrollTop? clientHeight？二、实现步骤1.HTML&CSS部分2.js部分总结 前言 这是某厂的一道前端笔试题，做题的时候对滚动相关的这几个参数搞混了导致没能实现滚动加载的效果，在这里记录一下。 提示：以下是本篇文章正文内容，下面案例可供参考 一、scrollHeight? scrollTop? clientHeight？ 一图胜千言，下面直接上图来区分三个属性 蓝色部分可以看见的窗口部分，clientHeight代表了这块的
根据例子来理解scrollHeight,clientHeight,scrollTop的区别
01-14
包含以下内容： function test(){ var infoHeight = document.getElementById(”info”).scrollHeight; //scrollHeight 为层实际的高度，有实际有多高就多高，与当前网页高度无关。
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
05-09
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 4192
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
【JS】scrollTop+scrollHeight+clientTop+clientHeight+offsetTop+offsetHeight
cannotbecounted的博客
11-08 697
scrollTop+scrollHeight+clientTop+clientHeight+offsetTop+offsetHeight
页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
12-11
例如，通过`scrollTop`和`scrollHeight`可以判断元素是否已滚动到底部，从而触发加载更多内容的事件。而`offsetTop`和`offsetHeight`则可用于计算元素在屏幕中的位置，实现如悬浮按钮等效果。理解并熟练运用这些属性...
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
10-15
JavaScript中的几个关键属性——scrollTop、scrollHeight、offsetTop和offsetHeight，对于网页动态效果和页面交互的实现至关重要。这些属性都是用来处理元素在视口中的位置以及可滚动内容的尺寸。 1. scrollTop属性...
JavaScript滚动属性详解：scrollTop、scrollHeight、offsetTop与offsetHeight
"这篇学习笔记主要探讨了JavaScript中与页面滚动相关的几个重要属性：scrollTop、scrollHeight、offsetTop和offsetHeight。这些属性在处理页面布局和动态效果时扮演着重要角色，尤其对于开发者来说，理解它们的工作...
花点时间记住scrollTop、clientHeight、offsetTop、scrollHeight
qq_40574071的博客
07-20 2198
一、经典图解读 先放上一张经典图 看不懂，没关系！接下来耐心看完必然有不一样的收获。 我们常遇到的是实际是这么几个属性： offsetTop clientHeight scrollTop scrollHeight 如果不把它们弄清楚就会导致每次遇到时都混淆不清，下面就逐一看看这么些属性。 （1）offsetTop HTMLElement.offsetTop为只读属性，它返回当前元素相对于其offsetParent元素的顶部内边距的距离。--MDN 【巧记】offset本身就是..
Js——ScrollTop、ScrollHeight、ClientHeight、OffsetHeight汇总
CaseyWei
06-17 7050
一直对ScrollTop、ScrollHeight、ClientHeight、OffsetHeight这些内容傻傻分不清楚，今天整体下。 scrollHeight scrollHeight含有scroll当然这个高度与滚动相关。 读写：只读 描述：包括overflow样式属性导致的视图中不可见内容，没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值c...
一个用jquery写的判断div滚动条到底部的方法
littlerebeka的专栏
09-26 1万+
jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。其中 scrollHeight 属性，互联网上几乎搜素不到关于它的应用技巧，而我正好需要用到它。     我们现在只探讨和垂直滚动有关的 scrollTop、scrollHeight 属性。     一、滚动条有关属性的正确理解：     假设有
scrollTop和scrollHeight
Hero4399的博客
02-28 3886
scollTop scrollTop 可以被设置为任何整数值，同时注意： 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个”non-scrollable”属性）， scrollTop将被设置为0。 设置scrollTop的值小于0，scrollTop 被设为0 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值. 总结：元素发生溢出时可以设置scrollT...
scrollHeight,clientHeight,scrollTop
weixin_45439010的博客
11-19 1420
移动端加载数据时，由于数据太多，不会一次性全部加载出来。有些会采用pc端那样用分页码的形式，但是更多的确实滑动滚动条到内容最后，加载更多内容出来。一般引入了三方的前端框架和插件，基本都会有此功能。偶尔会需要采用原生js实现，故而此处就介绍下原生js的实现方式。另外附上jquery的实现方式。 原生js实现思路 需要三个高度： scrollHeight（文档内容实际高度，包括超出视窗的溢出部分）、 scrollTop（滚动条滚动距离）、 clientHeight（窗口可视范围高度）。 当 clientHeig
scrollTop和scrollHeight属性
aliven1的博客
06-22 1万+
--------------------------------------------------------------------- 检测滚动条是否滚动到底部：
offsetTop和scrollTop区别
热门推荐
王晓思的博客
08-14 1万+
offsetTop:当前元素顶端距离父元素顶端距离,鼠标滚轮不会影响其数值. scrollTop:当前元素顶端距离窗口顶端距离,鼠标滚轮会影响其数值. 如图所示中间是个div,那么div.offsetTop = 此div border外到父元素border内且都不包括border                                   那么div.scrollTop = 此d...
scrollTop及offsetTop的对比
余光的博客
01-14 6749
scrollTop是指某个可滚动区块向下滚动的距离，offsetTop则是元素的上边框与父元素的上边框的绝对距离。 写这篇博客的时候，我对浏览器和元素的位置关系理解的也不太透彻，有错误的地方请大家指正。 一 offset 特别说明：offsetTop是只读属性。 offsetTop由如下两个单词构成： （1）.offset：具有偏移量的意思。 （2）.top：具有顶部的意思。 此属性的功能确实...
【JavaScript】scrollTop和scrollHeight在滚动事件中的使用
小秀的博客
06-24 3160
scrollTop和scrollHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
pig_ning的博客
03-24 3849
scrollTop、scrollLeft、scrollWidth、scrollHeight
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值