深层次理解js中的offsetTop、clientTop、scrollTop等

最近需要实现提示定位到页面某个点(节点)(比如这个点(节点)的文本框没有输入值),第一想到的就是用动画滚动来实现,必然需要用到ScrollTop属性(标题三个属性中唯一一个能读写的),所以百度学习一波,发现多数帖子是错误的或者不完整(片面),所以记录一波。

1 offsetTop及其相关

  offsetTop指目标控件到上级层(我试了一下div、table都不能算其上级层,应该是到body的top距离,等待以后补充完善(或大神指出))的距离(包括border)。其相关的offsetHeight表示控件的高度,offsetWidth表示控件的宽度。

2 clientTop及其相关

  clientTop这个属性我试验了一下,在本人当时的谷歌流浪器中,第一个控件(整个页面位置排第一)的clientTop为0,其他都为2(这是我设置整个页面控件之间的padding和margin值都为0)。我就大胆的猜测,clientTop是border和内容之间的区域的长度(等同于padding)产生的值,且不包括border值。然而我设置padding、margin值都为0,假设失败,崩溃啊。只能有border解释,第一个控件不包含border,其他控件都包含border,但是也比较牵强。说实话,我现在真说不出一个所以然来,但是我能坑定client的值相对整个控件来说值非常小,几乎可以忽略不计,所以我不需要考虑它。clientHeight各个浏览器定义都有所不同,但总体比offsetHeight大那么一点点。一点点是不是忽略不计,可以等同。

3 scrollTop及其相关

  scrollTop就比较好理解,它及其相关描述的是滚动条,scrollTop被卷去的高度,scrollHeight滚动条的高度。

4 scrollHeight、clientHeight、offsetHeight三者比较

  首先clientHeight比offsetHeight大一点点,也就是等同哦,都是表示控件高度(表述总有点错误(因为“一点点”’))。当用3者描述整个页面的时候,各个浏览器都约有不同,感觉没必要,因为都是些只读属性。

总结

  以上谈到的属性,只有ScrollTop可读写,可以利用这个属性,配合当前控件距离顶层控件的高度scrollTop(上面谈到了没遇到反例,所以scrollTop就暂时表示控件到顶部的距离(反正我用起来没毛病)),实现动态滚动。其他属性有争议不需要。首先我在这里声明一下,我写这篇文章最重要的目的就是记录我当前遇到的不能解决的问题,暂时用我自己的方式去不合理的解释。大家勿喷,能帮我解决问题更好。但是,我将的没疑问的,我都实践过了,没毛病。

发布了39 篇原创文章 · 获赞 5 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/a1920135141/article/details/100320373