Javascript中 scroll 、client、offset区别

高宽

• scrollHeight 得到的时实际的高宽，不含边框返回数值不带单位
• clientHeight 得到的是盒子高宽 不包含边框大小
• offsetHeight 得到的是盒子高宽 包含边框大小
• 他们三个返回数据都不带单位

scroll 事件 scrollTop

当我们滚动条滚动时 触发此事件
例：

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 10px solid red;
            overflow: auto;
        }
    </style>

<div>
        我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你 我爱你
    </div>

var div = document.querySelector('div')
div.addEventListener('scroll', function() {
        console.log(div.scrollTop);
    })

得到的结果：

滚动条滚动时监听这里得到的scrollTop实际上得到的是被拖上去部分

三种主要用法

offsetTop、clientTop、scrollTop、offsetTop各属性介绍

本身的宽高,不包括border
• clientWidth
• clientHeight

本身的宽高,包括border
• offsetWidth
• offsetHeight

距离左侧和上部的距离,相对于窗口
• offsetLeft
• offsetTop

获取可以滚动的宽度(不包括border)如果内容宽高币本身小,该值为本身宽高,否则就是内容的宽高
• scrollWidth
• scrollHeight

滚动出去的距离
• scrollLeft
• scrollTop

相对于窗口左上角的点
• clientX
• clientY

相对于屏幕左上角的点(建议移动端使用)
• screenX
• screenY

相对于本身左上角的点
(非标准属性)
•offsetX
• offsetY

相对于整个文档左上角的点(建议移动端使用)
• pageX
• pageY

获取窗口的宽高
• document.body.clientWidth
• document.body.clientHeight
• document.body.offsetWidth (border)
• docuemnt.body.offsetHeight (border)

获取正文的宽高(可以滚动的款到)
• document.body.scrollWidth
• docuemnt.body.scrollHeight

获取正文滚出去的宽高
• document.body.scrollTop
• document.body.scrollLeft

获取屏幕分辨率宽高
• window.screen.width
• window.screen.height

获取左边框宽度和上边框宽度

• clientLeft
• clientTop

作者：凤凰跑跑
链接：https://www.jianshu.com/p/39f4730d3815
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

被卷起兼容性问题