js学习小结（五）2014.5.1(视口，window的onscroll事件，返回顶端特效)
来源：互联网 发布：mysql子查询什么意思 编辑：程序博客网 时间：2024/05/22 11:55
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;">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p><DIV id="gobackDiv"><!--<A href="#head">点击返回顶部</A>--><A href="javascript:void(0)" onclick="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};};
0 0
- js学习小结（五）2014.5.1(视口，window的onscroll事件，返回顶端特效)
- js的window.onscroll事件兼容各大浏览器
- js的window.onscroll事件兼容各大浏览器！
- js的window.onscroll事件兼容各大浏览器！
- window.onscroll = function(){}事件
- DHTML的onScroll事件
- window.onscroll 的优化写法
- window.onscroll事件 谷歌兼容性问题
- js隐藏与显示回到顶部按钮及window.onscroll事件应用
- 返回顶端、底端js效果
- window.onscroll和document.body.onscroll的区别
- attachEvent()注册的事件用window.onscroll = null不能注销
- 【JavaScript】利用滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件
- 【JavaScript】利用滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件
- js中的onscroll的用法
- 各浏览器对document.body.onscroll,window.onscroll,document.documentElement.onscroll的兼容性
- 多个window.onscroll的解决方法
- 多个window.onscroll的解决方法
- Safecracker HDU1015
- [CNN]卷积神经网络
- 稀疏矩阵的快速转置
- android 使用canvas绘图保留痕迹
- [LeetCode] Integer to Roman
- js学习小结（五）2014.5.1(视口，window的onscroll事件，返回顶端特效)
- 广播的分类
- 14 0501
- Java CMD方式编译并执行带包路径的Java文件
- android设计模式之代理模式
- java8是最快的JVM？对于Fork-Join的基准性能测试
- hibernate update方法
- 每日一个C++小程序【趣味篇】--C++绘画小程序
- 内网端口转发与内网映射外网的区别和应用，发布网站访问内网
