求滚动条滚动像素
查看滚动条的滚动距离
window.pageXOffset/pageYOffset
IE8及IE8以下不兼容
document.body/documentElement.scrollLeft/scrollTop
兼容性比较混乱,用时取两个值相加,因为不可能存在两个同时有值
封装兼容性方法,g求滚动轮滚动距离getScrollOffset()
// IE8和IE8以下的浏览器
// document.body.scrollLeft/top
// document.documentElement.scrollLeft
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.clinetWidth,
h :document.body.clientHeight
}
}else{
return {
w:document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
}
查看元素的几何尺寸
domEle.getBoundingClientRect();
兼容性很好
该方法返回一个对象,对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标
height和width属性老版本IE并未实现
返回的结果并不是“实时的”
var div =document.getElementsByTagName('div')[0];
var d=div.getBoundingClientRect()
查看元素的尺寸
dom.offsetWidth,dom.offsetHeight
查看元素的位置
dom.offsetLeft, dom.offsetTop
对于无定位父级的元素,返回相对文档的坐标。对于有定位父级的元素,返回相对于最近的有定位的父级的坐标。
dom.offsetParent
返回最近的有定位的父级,如无,返回body, body.offsetParent 返回null
eg:求元素相对于文档的坐标
让滚动条滚动
window上有三个方法
scroll(),scrollTo(),scrollBy();
三个方法功能类似,用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。
区别:scrollBy()会在之前的数据基础之上做累加。
eg:利用scrollBy() 快速阅读的功能
var start=document.getElementsByTagName('div')[0];
var stop =document.getElementsByTagName('div')[1];
var timer=0;
var key=true;
start.onclick=function (){
timer=setInterval(function (){
window.scrollBy(0,10);
},100);
key=false;
}
stop.onclick=function (){
clearInterval(timer);
key=true;
}
网友评论