js中,offset client scroll的区别

偏移量:offset

offsetHeight: 元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的)水平滚动条的高度、上边框高度和下边框高度。

offsetWidth: 元素在水平方向上占用的空间大小,以像素计。包括元素的宽度、(可见的)垂直滚动条的宽度、左边框宽度和右边框宽度。

offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离

图片发自App

客户区大小:client

clientWidth:元素内容区宽度加上左右内边距宽度。

clientHeight:元素内容区高度加上上下内边距高度。

滚动大小:  scroll

指的是包含滚动内容的元素的大小。

scrollHeight:在没有滚动条的情况下,元素内容的总高度。

scrollWidth:在没有滚动条的情况下,元素内容的总宽度。

scrollLeft:被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollTop:被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

图片发自App

在确定文档的总高度时(包括基于视口的最小高度时),必须取得scrollWidth/clientWidth 和scrollHeight/clientHeight 中的最大值,才能保证在跨浏览器的环境下得到精确的结果。

你可能感兴趣的:(js中,offset client scroll的区别)