js学习小结（五）2014.5.1(视口，window的onscroll事件，返回顶端特效)

最新推荐文章于 2023-05-12 11:36:52 发布

zd10101501

最新推荐文章于 2023-05-12 11:36:52 发布

阅读量1.2k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/danzhang1010/article/details/24847755

版权

js 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

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};

};