clientWidth与offsetWidth与scrollWidth

关注

原创 2022-11-29 21:29:34 450 阅读 AI 写同款· GEO 优化 ›

从原理上搞懂offsetWidth、scrollWidth、clientWidth以及其他偏移量 1. 影响以上参数主要有哪些内容笔者在总结这几个内容之前，也翻了很多书，看了很多帖子，始终没有搞清楚这几个内容的逻辑，每次记住了，没过几天就忘了，下次再被问到完全又分不清楚了。于是又拿起了《Javascript权威指南》这本书，认认真真读了两遍，终于发现了一些规律，下面就给大家总结一下。其实每个人都很清楚，影响以上几个因素的参数，无非就那么几个：我们拿一个div来举例。主要包括了：padding, border, margin, width(height)，滚动条的距离scroll, 以及滚动到了视口阅读详情

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
}