[客户端滚动属性] dom元素尺寸 #JavaScript #前端

snippet.md

Element

1. Element.scrollHeight

这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

2. Element.scrollTop

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数

一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop

3. Element.clientHeight

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算. 相当于这个盒子的可视高度

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight

Window

1. Window.screenX

返回浏览器左边界到操作系统桌面左边界的水平距离。

是window.screenLeft的别名

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/screenX

2. Window.scrollX

返回文档/页面水平方向滚动的像素值。

大部分情况有 document.documentElement.scrollTop === window.scrollY

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollX

3. Window.outerHeight

Window.outerHeight 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）