1.视口
(1) 首先要知道什么是视口?
可以看出视口和浏览器窗口和页面大小是不一样的,直观的感受就是我们在浏览器窗口中看到的页面部分。
(2)如何获得视口?
首先看看window的两个属性,window的innerWidth/innerHeight和outerWidth/outerHeight,
从下面两幅图可以看出在非ie中,outerHeight/outerWidth表示的是浏览器的高和宽,而innerWidth和innerHeight表示的就是视口的大小,而在ie中,不知道 innerWidth/innerHeight和outerWidth/outerHeight表示的是什么。
在ie中,也无法通过document.documentElement.clientWidth和document.body.clientWidth来获取真正视口的大小,但是在《javascript高级程序设计》书中说,在非ie6的ie中可以通过window.innerwidth来获取视口的大小,在ie6标准模式中通过document.documentElement.clientWidth,在ie6的怪异模式中通过document.body.clientWidth来获取视口大小,但是我经过实践发现不对,总是存在着偏差, 总之ie就是一个奇葩。
但是我发现所有浏览器(除了ie6)的一个共同点就是,window.innerWidth与 document.documentElement.clientWidth,前者包括了滚动条的宽度,后者没有包括滚动条的宽度。
(3)移动浏览器中的个属性差异
2.window的scroll事件
( 很纠结的一个东西。各浏览器的支持不一样,倒腾了一下午)
首先是给window的scroll事件添加处理事件,然后获取浏览器向左向上滚动的像素,添加处理事件和普通的ui事件一样,注意的是如何获取滚动的像素。经实践总结发现了一下两点:
(1)在标准模式中,ie和firefox需通过document.documentElement.scrollLeft/Top来获取滚动的像素,但是在opera和chrome中必须通过document.body.scrollLeft/Top来获取。
(2)在怪异模式中,ie可以通过document.documentElement.scrollLeft/Top和document.body.scrollLeft/Top来获取像素,但是在ff、chrome、opera中只能通过document.body.scrollLeft/Top来获取像素
3.返回顶部按钮
还需要知道一个方法window.scrollTo(xIndex,yIndex);这个方法用于滚动到某个坐标点,参数就是坐标点,这个方法用于返回顶部,当然也可以直接用锚点,但是锚点用了之后,地址栏的地址也变了。所以没有用scrollTo方便。源码如下:
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>返回页面顶部特效</title> <style type="text/css"> /* 针对ie6无法实现postion:fixed的bug */ #gobackDiv{ position:fixed; right:20px; bottom:20px; display:none; } * html #gobackDiv{ position:absolute; left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)); top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))) } </style> </head> <body> <p id="head"> i am head</p> <p style="width:1000px;height:1000px;background-color:red;">eeeeee eeeeeeeeeeeeeeeeeeeeeeeee eee </p> <DIV id="gobackDiv"> <!--<A href="#head">点击返回顶部</A>--> <A href="javascript:void(0)" οnclick="gobacktop()">点击返回顶部</A> </DIV> <script type="text/javascript" src="../js/JSEvent.js"></script> <script type="text/javascript" src="../js/BOMExtent.js"></script> <script type="text/javascript"> EventUtil.addEventHandler(window,'scroll',function(){ var top= getScollPix().top; var div=document.getElementById('gobackDiv'); if(top>10){ div.style.display='block'; }else{ div.style.display='none'; } }); function gobacktop(){ window.scrollTo(0,0); } </script> </body> </html>
/*获取滚动的像素*/ var getScollPix=function(){ var left,top; var _body=document.body; var _html=document.documentElement; if(document.compatMode=='CSS1Compat'){ left=_body.scrollLeft==0&&_html.scrollLeft!=0?_html.scrollLeft:_body.scrollLeft; top=_body.scrollTop==0&&_html.scrollTop!=0?_html.scrollTop:_body.scrollTop; }else{ left=_body.scrollLeft; top=_body.scrollTop; } return {top:top,left:left}; };