clientWidth与offsetWidth与scrollWidth

原创已于 2022-11-29 21:29:34 修改 · 420 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html

于 2022-10-01 15:29:01 首次发布

本文详细介绍了客户端编程中常用的元素尺寸属性，包括clientWidth与clientHeight、offsetWidth与offsetHeight、scrollWidth与scrollHeight等的区别及应用场景，并提供了一个用于判断元素是否在视口内的示例函数。

clientWidth与clientHeight

是元素的一个属性，表示元素的实际大小。,值为padding+content区的尺寸,不包括滑动条
来自菜鸟编程

offsetWidth与offsetHeight

是元素的一个只读属性，包含conten+padding+border尺寸，如果有滑动条也会包括在内。
来自菜鸟教程

scrollWidth与scrollHeight

适用于当元素尺寸过大，产生滑动条的情况。
尺寸为padding+content，当页面尺寸合适，没有滑动条时scrollWidth==clientWidth

scrollTop

scrollTop是当前元素内容content顶部到可视区域clientHeight的高度

判断元素是否可视

通过判断元素顶部到可视窗口的距离。

function isInViewPortOfOne (el) {
    // viewPortHeight 兼容所有浏览器写法
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
    const offsetTop = el.offsetTop
    const scrollTop = document.documentElement.scrollTop
    const top = offsetTop - scrollTop
    return top <= viewPortHeight
}