浏览器滚动条高度的获取

开始

最近做业务需求时，需要监听滚动条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: 一般用来描述文旦视口的大小

更多专业前端知识，请上 【猿2048】www.mk2048.com