javascript scrollbar滚动条相关属性

window.innerHeight  表示浏览器可见或可用高度

window.pageXOffset 和 window.pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

// 所有浏览器，除了 IE9 及更早版本

水平滚动: " + window.pageXOffset ;

垂直滚动: " + window.pageYOffset;

// IE9 及更早版本

"水平滚动: " + document.documentElement.scrollLeft ;

垂直滚动: " + document.documentElement.scrollTop;

scrollHeight和scrollTop属性只有DOM元素才有，window/document没有

element.getBoundingClientRect();返回一组用于描述边框的只读属性——left、top、right和bottom，单位为像素，如下图

当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过window.scrollX和window.scrollY），这样就可以获取与当前的滚动位置无关的值。

为了跨浏览器兼容，请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。

附：

dom 从可视窗口消失计算

dom.getBoundingClientRect().top - window.document.body.clientTop < 0 则从上方消失

dom.getBoundingClientRect().top - window.document.body.clientTop > window.innerHeight  则从下方完全消失

如果要计算刚开始消失，还需要dom的高度 如下：

 dom.getBoundingClientRect().top - window.document.body.clientTop > window.innerHeight - dom.height

绝对定位某个dom位置

left = dom.getBoundingClientRect().left + window.pageXOffset - window.document.body.clientLeft

top = dom.getBoundingClientRect().top + window.pageYOffset - window.document.body.clientTop