确定滚动距离
查看视口的尺寸
标准模式or怪异模式
查看元素的几何尺寸
查看元素的尺寸
查看元素的位置
让滚动条滚动
确定滚动距离
function getScrollOffset() { if(window.pageXOffset) { return { x : window.pageXOffset, y : window.pageYOffset } }else{ return { x : document.body.scrollLeft + document.documentElement.scrollLeft, y : document.body.scrollTop + document.documentElement.scrollTop } } }
查看视口的尺寸
window.innerWidth/innerHeight (IE8及IE8以下不兼容)
document.documentElement.clientWidth/clientHeight 标准模式下,任意浏览器都兼容
document.body.clientWidth/clientHeight 适用于==怪异模式==下的浏览器
封装兼容性方法,返回浏览器视口尺寸getViewportOffset()
function getViewportOffset() { if(window.innerWidth) { return { w : window.innerWidth, h : window.innerHeight } }else{ if(document.compatMode === "BackCompat") { //怪异模式,混杂模式 return { w : document.body.clientWidth, h : document.body.clientHeight } }else{ //标准模式 return { w : document.documentElement.clientWidth, h : document.documentElement.clientHeight } } } }
标准模式or怪异模式 <!DOCTYPE html> 这段代码的作用,进入标准模式(简单来说) 怪异模式(浏览器的渲染模式不同)(也叫混杂模式):试图兼容之前的语法(识别过时的语法) 使用document.compatMode属性代表兼容性,这个属性可以判断是否时标准模式。 查看元素的几何尺寸 domEle.getBoundingClientRect(); (求出的是视觉上的尺寸) 兼容性很好 该方法返回一个对象,对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标 height和width属性,老版本IE未实现 返回的结果不是“实时的”
查看元素的尺寸 dom.offsetWidth (求出的是视觉上的尺寸) dom.offsetHeight
查看元素的位置 dom.offsetLeft dom.offsetTop 对于无定位父级的元素,返回相对文档的坐标。对于有定位父级的元素,返回相对于最近的有定位的父级的坐标。 dom.offsetParset 返回最近的有定位的父级,如无,则返回body,body.offsetParset返回null。
让滚动条滚动 window上有3个方法: scroll(), scrollTo(), | scrollBy(); 三个方法功能类似,用法都是将x,y坐标传入,即实现让滚动轮滚动到当前位置。 区别:scrollBy()会在之前的数据基础上做累加。 eg.利用scrollBy()快速阅读的功能