700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > scrollTop scrollHeight offsetTop offsetHeight clientTop clientHeight区别

scrollTop scrollHeight offsetTop offsetHeight clientTop clientHeight区别

时间:2022-02-21 18:25:50

相关推荐

scrollTop scrollHeight offsetTop offsetHeight clientTop clientHeight区别

带你搞清楚 scrollTop、scrollHeight、offsetTop、offsetHeight、clientTop、clientHeight 区别

clientHeight 和 offsetHeight 指的是元素的本身的高度,区别是 在元素设置

box-sizing: border-box时,clientHeight元素本身的高度 - 元素的边框;offsetHeight就是元素本身的高度

没有设置box-sizing: border-box时,clientHeight是元素的高度 + padding;offsetHeight是元素的高度 + padding + border

注:offsetHeight不管有没有滚动轴都不影响

clientTop指的是上边框的宽度

offsetTop指的是元素距离具有定位元素的父元素的距离(都是边框外面开始计算)

在有滚动的元素的时候

scrollHeight会随着子元素的高度变化而变化,即使自身固定高度出现滚动轴,包括padding和子元素撑大的部分

scrollHeigh:元素内容的全部高度,包括content、溢出的content、padding、伪元素。不包括元素的border和marginclientHeight:元素的可见部分高度,包括content、padding。不包括元素的border和marginoffsetHeight:元素的实际占据高度,包括content、padding、border、滚动条。不包括伪元素

scrollTop指的是元素的滚动距离, 可读可写的一个属性

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。