JS盒子模型的三个系列client、offset、scroll

328 阅读1分钟

触发规则:当元素的滚动套滚动时触发的事件。

使用方法: element.onscroll = function () {}

scroll系列

scrollTop: 元素滚动条滚去部分的高度

内容不溢出等同于clientWidth

内容溢出但是没有overflow属性,盒子的上padding+内容的高度;

内容溢出但是有overflow属性,盒子的上下padding+内容的高度;

元素.scrollWidth        指的是:在没有滚动条的时候元素内容区域的实际宽度

元素.scrollHeight   指的是:一个元素内容区域的实际大小,包括不在页面中的可滚动部分(内容和内边距)

元素.scrollLeft           指的是:卷去内容的宽度

元素.scrollTop           指的是:卷去内容的高度

offset系列

元素.offsetWidth       指的是:clientWidth +左右border 

元素.offsetHeight      指的是:clientHeight+上下border

元素.offsetLeft           指的是:当前盒子的外边框到上级参照物的内边框的距离

元素.offsetTop           指的是:当前盒子的外边框到上级参照物的内边框的距离

元素.offsetParent      指的是: 上级参照物(有定位的那个上级元素)如果没有定位那么最终就到body了,body的上级参照物是null

client系列

元素.clientWidth       指的是:width+左右padding 

元素.clientHeight      指的是:height+上下padding

元素.clientLeft        指的是:左border

元素.clientTop         指的是:上border

*注:以上13个属性只有scrollTop scrollLeft是可以设置的,其他的都是只读属性; scrollTop  scrollLeft 有边界值