1、scrollTop/scrollLeft:检测被浏览器遮挡(卷去)的头部和左边部分.
由于存在是否声明DTD(文档类型定义)的问题,不同浏览器对scroll的调用方式不同,对此,这里做了一个兼容多个浏览器的scroll()的封装方法
function scroll(){ //如果这个属性存在,那么返回值应该是0-无穷大 //如果没有返回值是undefined; if(window.pageYOffset !== undefined){ return { "top": window.pageYOffset, "left": window.pageXOffset }; }else if(document.compatMode === "CSS1Compat"){ return { "top": document.documentElement.scrollTop, "left": document.documentElement.scrollLeft }; }else{ return { "top": document.body.scrollTop, "left": document.body.scrollLeft }; }
还有一个更简略的方法:
function scroll(){ if(window.pageYOffset !== undefined){ return { "top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop, "left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft } }
调用方式:(返回被浏览器遮挡(卷去)的头部和左边部分长度)
scroll().top
scroll().left
2、同理,clientWidth/clientHeight:检测浏览器可视区域宽度/高度.
function client(){ if(window.innerHeight !== undefined){ return { "width": window.innerWidth, "height": window.innerHeight } }else if(document.compatMode === "CSS1Compat"){ return { "width": document.documentElement.clientWidth, "height": document.documentElement.clientHeight } }else{ return { "width": document.body.clientWidth, "height": document.body.clientHeight } } }
调用方式:(返回浏览器可视区域宽度/高度)
client().width
client().height
这种封装方法是给scroll()或client()绑定了一个属性和值,调用函数.属性,返回的是一个属性值