关于offsetTop的理解

最新推荐文章于 2024-05-20 10:22:47 发布
最新推荐文章于 2024-05-20 10:22:47 发布
阅读量3.8w 收藏 86
点赞数 44
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinxi1112/article/details/90692484
版权

1. offsetTop：元素到offsetParent顶部的距离

2. offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。

3. 注意：只有元素show（渲染完成）才会计算入offsetTop，若是中间有元素数据需要异步获取，会导致最终获取的offsetTop值偏小

jinxi1112
关注
  • 44
    点赞
  • 踩
  • 86
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
10-28
理解这些属性的区别对于进行网页布局和动态效果的实现至关重要。 1. `offsetTop` `offsetTop`属性返回一个元素相对于其定位父元素（即拥有`position`属性的最近祖先元素，如果不存在这样的祖先，则相对于`body`）...
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
小菜吉的博客
02-28 2万+
这里是javascript中制作滚动代码的常用属性 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; window.innerHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高..
offsetTop、clientTop、scrollTop等属性详解【概念+详细例子分析】
hannah2233的博客
12-24 5797
1、 offsetTop、offsetLeft2、 offsetWidth、offsetHeight3、 offsetX、offsetY1、 clientWidth、clientHeight2、 clientTop、clientLeft3、 clientX、clientY1、 scrollWidth、scrollHeight2、 scrollTop、scrollLeft
一文带你彻底了解offsetTop＆offsetParent
qq_42816270的博客
04-28 665
offsetTop为只读属性，它返回当前元素相对于其元素的顶部内边距的距离。上面提到的内边距，即不包括元素边框的长度。我们再来看下是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。当元素的 style.display 设置为 “none” 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。
scrollTop及offsetTop的对比
余光的博客
01-14 5931
scrollTop是指某个可滚动区块向下滚动的距离，offsetTop则是元素的上边框与父元素的上边框的绝对距离。 写这篇博客的时候，我对浏览器和元素的位置关系理解的也不太透彻，有错误的地方请大家指正。 一 offset 特别说明：offsetTop是只读属性。 offsetTop由如下两个单词构成： （1）.offset：具有偏移量的意思。 （2）.top：具有顶部的意思。 此属性的功能确实...
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页
10-30
在Javascript拖拽系列文章中，offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的，它们都是关于位置定位的参数。在本文中，我们将详细介绍这四个属性的定义、用法、浏览器支持情况、注意事项...
Js中关于top、clientTop、scrollTop、offsetTop.pdf
09-27
Js 中关于 top、clientTop、scrollTop、offsetTop 的详细知识点 在 JavaScript 中，理解 top、clientTop、scrollTop、offsetTop 等属性是非常重要的，这些属性都是用于获取或设置 HTML 元素的位置和尺寸的。下面...
对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解
08-08
对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解,
页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe
09-25
在网页开发中，准确地获取和操作页面元素的位置至关重要，这涉及到多个JavaScript和CSS属性，如`top`、`postop`、`scrollTop`、`offsetTop`、`scrollHeight`、`offsetHeight`和`clientHeight`。这些属性帮助开发者...
js中关于scrolltop.offsettop等距离用法的介绍
纸上得来终觉浅，绝知此事要躬行
12-01 6004
页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidt
offset().top与offsetTop的区别
qq_43654065的博客
01-19 2117
转载：原博文地址 offset().top是jQuery的方法，需要引入jQuery才能使用，它获取的是你绑定元素上边框相对于文档顶端的偏移量，我们可以吧文档理解成一幅图，这幅图包含了html，html内容越多图越长，浏览网页时，就是透过透明的玻璃（视窗）在看这幅画。 offsetTop是原生js的方法，它获取的是你绑定元素上边框相对离自己最近且position属性非static的祖先元素的偏移量。 总结 相同点： 当无滚动条且offsetTop与offset().top参照对象相同时，他们获取的值相同。
offsettop及相关属性介绍
qq_42345237的博客
01-03 1297
offsettop及相关属性介绍 最近的项目中有用到offsetTop属性配合iscroll插件来进行下拉加载的一个效果，经过测试，在其他浏览器都是OK的，但是在iPhone的safari上页面刚加载完以后，滚动部分会有被遮挡一部分，后来发现是因为获取到的offsetTop值在刚开始进来的时候，并不是0，而是120px，这个刚好是节点元素到页面顶部的距离，所以猜测这里应该是offsetparent...
JQ的offset().top与js的offsetTop区别详解
weixin_30731305的博客
12-20 867
一、前言 最近在做一个图片懒加载的插件，就纵轴(Y轴)而言，我需要时时获取图片的上偏移量，好判断是否已进入视图区域，而我所理解的是offsetTop应该是跟offset().top一样的，然后陷入了因为不了解它们区别，而带来BUG的死坑。这里通过实验整理，做个清晰好懂的笔记，如果你也想弄清，建议复制我的代码跟着操作，印象会更为深刻。 二、offset().top与offsetTop什么意思？它...
offsetTop、clientHeight、scrollTop等属性的含义
最新发布
qq_53895518的博客
05-20 433
包含元素的引用保存在offsetParent属性中，不一定是parentNode，比如的offsetParent是，因为它是DOM层次中距最近的一个具有大小的元素。所有的偏移量属性都是只读的，而且每次访问都要重新计算，避免重复访问。四、innterHeight和outerHeight。这两个属性也是只读和需要重新计算的。二、客户区大小-以client开头的。一、偏移量-以offset开头的。三、滚动大小-scroll开头的。
各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight...
weixin_30525825的博客
08-26 431
1、.position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移，返回.position().left和.position().top，不算上自己的margin-left； jquery的.offset()获取相对于视口左上角的偏移，返回.offset().left和.offset().top...
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
热门推荐
semanwmj的专栏
12-15 2万+
这里是javascript中制作滚动代码的常用属性 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文
window.addEventListener('scroll', function() { var element = document.getElementById('myElement'); var elementPosition = element.getBoundingClientRect().top; var windowHeight = window.innerHeight; if (elementPosition < windowHeight) { element.classList.add('fixed'); } else { element.classList.remove('fixed'); } }); 提示offsettop报错
07-08
抱歉，我之前给出的回答有误。在提供的代码中，并没有使用`offsetTop`属性，因此报错信息与`offsetTop`无。 根据你提供的代码，你正在监听`scroll`事件，并根据元素的位置来添加或移除一个名为`fixed`的类。这段代码应该是可以正常工作的，没有使用到`offsetTop`属性。 请确认报错信息的具体内容，以及出错的行号和堆栈信息。这将有助于我更好地理解问题并提供正确的解决方案。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值