开始
最近做业务需求时,需要监听滚动条scoll事件,获取滚动条高度,用的document.body.scrollTop发现得到的值一直是0,后来做了一些查询,挖出不少秘密,做次笔记,以免忘掉
先放结论:
- 对有doctype申明的页面 可以使用:document.documentElement.scrollTop
- 没有doctype申明的页面使用:document.body.scrollTop
- safari:特例独行:使用 window.pageYOffset
所以我们可以这样获取scrollTop:
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;复制代码
什么是DTD:
DTD(文档类型定义)的作用是定义 XML 文档的合法构建模块。它使用一系列的合法元素来定义文档结构 在我们的页面中是这样展现
有些东西不手写一遍永远记不下来:
screen对象(针对的是整个屏幕):
- screen.widht|height:整个屏幕的高度跟宽度
- screen.avaiWidth|availHeight: 屏幕可用宽高(减去底下任务栏的高度)
window对象(针对的是浏览器)
- window.outerWidth|outerHeight:整个浏览器的宽高
- window.innerWidth|outerWidth:浏览器可用的宽高(出去工具栏的高度,但是包括滚动条)
元素对象
- ele.offerWidth|offerHeight: 元素总的宽高(包括滚动距离)
- body.clientWidth|clientHeight: 一般用来描述文旦视口的大小