js中client、offset、scroll之间的关系

迷南。 2022-08-21 13:40 157阅读 0赞

js中clientHeight和offsetHieght之间的关系

clientHeight

大部分浏览器对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，即然是指可看到内容的区域，滚动条不算在内。但要注意padding是算在内。其计算方式为clientHeight = topPadding + bottomPadding+ height - scrollbar.height。
    offsetHeight

在IE6，IE7，IE8以及最新的的FF, Chrome中，在元素上都是offsetHeight = clientHeight + 滚动条 + 边框。
    scrollHeight   --------------------指的是对象已被绚烂出来了之后（成为元素）他的值才有可能和clientHeight不一样，若还是对象状态的话，           scrollHeight=clientHeight。只有scrollHeight的值大于clientHeight时，scrollTop才有用，同时在设置scrollTop时 且要设置为overflow:hidden。不然没用。

他内在的scrollBottom值不可能为负数，这就保证了元素和容器不会脱离分开。同理scrollLeft、scrollRight、scrollBottom

也一样的。

scrollHeight是元素的padding加元素内容的高度。这个高度与滚动条无关，是内容的实际高度。 计算方式 ：scrollHeight = topPadding + bottomPadding + 内容margix box的高度。 在浏览器中的区别在于： IE6、IE7 认为scrollHeight 是网页内容实际高度，可以小于clientHeight。 FF、Chrome 认为scrollHeight 是网页内容高度，不过最小值是clientHeight。 注： 以上都是对于一般元素而方言的，body和documentElement的clientHeight, offsetHeight和scrollHeight在各个浏览器中的计算方式又不同。在所有的浏览器中，如果你想获取整个视窗的高度，你得用documentElement.clientHeight，因为body.clientHeight是由它的内容决定的。 关于body和documentElement的这些属性，则完全是另外一回事： 
     js中的scroll和offset 使用比较的实例与分析
      
       
       
        1.offsetTop     : 当前对象到其上级层（父类）顶部的距离. 不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
       
        2.offsetLeft    : 当前对象到其上级层左边的距离. 不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.
       
        3.offsetWidth   : 当前对象的宽度. 与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值
       
        4.offsetHeight : 与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值
       
        5.offsetParent  : 当前对象的上级层对象. 注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题. 利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．
       
        6.scrollLeft    : 对象的最左边到对象在当前窗口显示的范围内的左边的距离． 即是在出现了横向滚动条的情况下，滚动条拉动的距离．
       
        7.scrollTop 对象的最顶部到对象在当前窗口显示的范围内的顶边的距离． 即是在出现了纵向滚动条的情况下，滚动条拉动的距离．