一、前言
我最近在制作懈怠图像读取的插件。 对于垂直轴(y轴)，必须始终获取图像的上偏移量，以确定是否在视图区域中。 我理解的是，offsetTop应该与offset ).top相同。 而且，由于不知道它们的区别，陷入了带来错误的死坑。 这里用实验整理，做清楚易懂的笔记。 如果你也想弄清楚的话，我建议你复制我的代码进行操作。 会给人留下更深的印象。
二、offset().top与offsetTop什么意思？它们都是相对谁的上偏移量？
offset ().top是JQ的方法，必须引入JQ才能使用。 这将获取绑定元素的上边框相对于html上边界的偏移。
offsetTop是本机JS方法，用于获取绑定元素的上边框相对最接近自己且位置属性为非静态的祖先元素的偏移。 详细情况将在后面叙述。
区别一：offset().top与offsetTop偏移量参照对象不同，offset().top始终是html，而offsetTop参照的对象是可变的。
请先复制下面的代码。
html部分ul class='contain' lidiv/div/li
lidiv/div/li
lidiv/div/li lidiv/div/li/ulcss部分body{ position:relative； padding:0； margin:0；/*显示： table； */}.contain { list-style : none； height: 1000px； width: 800px； Overflow :自动； margin-top:200px；
背景色： # ebc 38d； }.contain Li { margin-bottom 336010 px； }.containlidiv { background-color : # e 4393 c； width: 300px； height: 400px； }js部分var ul=document.query selector ('.contain )； var div=document.queryselectorall (' div ' ) [0]； function demo () { var top1=div.offsetTop； //第一个div的偏移值var top2=$(div ).offset ().top； //第一个div的偏移var top3=ul.scrollTop； //ul自己的滚动条滚动的距离默认为0，向下滚动时逐渐增大//我推测top2=top1 - top3； console.log(top2，top1，top3)； }
demo(ul.addeventlistener )、demo )； 我记得html自己生成补充，然后引入了JQ。 在此提供静态存储库，直接复制和部署JQ地址即可。
我们在http://www.Sina.com/http://www.Sina.com/CSS上向ul添加了上边距200px。 首先，它不解决上边距崩溃的问题。 这样，整个body区域距离页面顶部有200px的可用空间，从而更容易区分body和html。 下图中的html
这是html的范围
这是body范围，明显低于html 200 px的空白区域：
打开控制台后，打开Staticfile CDN
第一个200: 的值是第一个div上边界相对于html的上偏移量，因为有200px的margin，所以为200；
第二个0: 200,0,0；的值第一个div上边界相对于body的上偏移量。 因为从div向上查找时，第一个位置属性是非静态的(relative，absolute，fixed之一)祖先元素
第三个0: offset().top值容器ul滚动条滚动的距离为0，因为缺省情况下不滚动；
取消对display:talbe的注释，并将body的position:relative属性移动到html。 其他请不要更改。 如下所示。
p>我们可以看到此时输出：200,200,0；
第一个200：offset().top的值还是第一个div相对html的上偏移量，因为margin的问题。
第二个200：offsetTop的值验证了我们之前的概念，offsetTop的参照对象是第一个position不为static的祖先元素，此时被我们修改成了html;
第三个0：容器ul的滚动条距离。
我们将body的display：table的注释去掉，将html的position属性去掉并还给body。其它不变，像这样，毕竟布局中上margin坍塌本来就不合理：
此时的body已经跟html范围相同，不存在200px空白区域，虽然offsetTop参照的是body，offset().top参照的是html，但从两个参照对象的上边界而言，可以理解为参照的是统一对象。
可以看到控制台还是输出200,200,0。
相同点：当无滚动条且offsetTop与offset().top参照对象相同时，它们获取的值相同。
区别二：offsetTop获取的偏移量不随滚动条滚动变化，但offset().top跟这滚动条变化
我们尝试滚动ul的滚动条，观察输出值的变化
可以看到offset().top的值随着滚动条滚动越变越小，因为第一个div的上边界与html的上边界越来越近了。
而offsetTop的值从一开始的200一直就没变化，不受滚动条影响。
而ul的scrollTop也随着我们的滚动条往下拉，有了滚动距离，也在慢慢变大。很好理解不是吗？
三、猜测：offset().top = offsetTop - scrollTop
JQ能拿到变化的上偏移量，原生JS怎么拿这个变化的值呢？参照上面试验，scrollTop变大的同时，offset().top也在随之变小，只有 offsetTop恒定不变。
不用猜测了，大家将滚动输出打印的数字做个计算，很明显，第一个数字 = 第二个数字 - 第三个数字，就算offset().top为负数也一样遵守规则：
那我们可以得出这样一个规律：
当一个元素的offset().top与offsetTop的参照对象相同时，offset().top的值等于offsetTop的值减去scrollTop的值。
我们将body的display属性注释掉，像这样
很明显，因为margin坍塌的问题，body和html之间又多了200px的空白间隔区域，offset().top与offsetTop的参照对象这下就不同了，我们滚动滚动条可以看到规则就不适用了：
四、总结
offsetTop与offset().top相同点：
1.当无滚动条且offsetTop与offset().top参照对象相同时，它们获取的值相同。
offsetTop与offset().top不同点：
1.offset().top与offsetTop偏移量参照对象不同，offset().top始终是html，而offsetTop参照的对象是可变的。
2.offsetTop获取的偏移量不随滚动条滚动变化，但offset().top随着滚动条变化
一个规律：
1.当一个元素的offset().top与offsetTop的参照对象相同时，offset().top = offsetTop - scrollTop
还是建议大家能照着练一遍，要不了多少时间，印象也会更深刻，也欢迎大家的补充和纠正，毕竟我也可能有理解错误的地方。
转载请标明出处，谢谢。好困...........
转载于:https://www.cnblogs.com/echolun/p/10146197.html