浏览器滚动条高度的获取

开始

最近作业务需求时，须要监听滚动条scoll事件，获取滚动条高度，用的document.body.scrollTop发现获得的值一直是0，后来作了一些查询，挖出很多秘密，作次笔记，以避免忘掉

先放结论：

1. 对有doctype申明的页面 能够使用：document.documentElement.scrollTop
2. 没有doctype申明的页面使用：document.body.scrollTop
3. safari:特例独行：使用 window.pageYOffset

因此咱们能够这样获取scrollTop:

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
复制代码

什么是DTD：

DTD（文档类型定义）的做用是定义 XML 文档的合法构建模块。它使用一系列的合法元素来定义文档结构 在咱们的页面中是这样展示

有些东西不手写一遍永远记不下来：

screen对象(针对的是整个屏幕)：

1. screen.widht|height:整个屏幕的高度跟宽度
2. screen.avaiWidth|availHeight: 屏幕可用宽高（减去底下任务栏的高度）

window对象(针对的是浏览器)

1. window.outerWidth|outerHeight:整个浏览器的宽高
2. window.innerWidth|outerWidth:浏览器可用的宽高（出去工具栏的高度，可是包括滚动条）

元素对象

1. ele.offerWidth|offerHeight: 元素总的宽高(包括滚动距离)
2. body.clientWidth|clientHeight: 通常用来描述文旦视口的大小