scrollTop的兼容性小结

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

在页面上加上了

<!DOCTYPE   HTML   PUBLIC   "-//W3C//DTD   HTML   4.01   Transitional//EN"   
  "http://www.w3.org/TR/html4/loose.dtd">

之后,document.body.scrollTop的值一直为0(在IE和FF下),网上有人改为document.documentElement.scrollTop就可以了,试用了一下真的OK了。

 

但是当换到Google浏览器时,问题又出来了,document.documentElement.scrollTop值一直为0!到是document.body.scroll的值正确了。

 

网上有解决方案如下:(http://www.codebit.cn/pub/html/javascript/tip/get_scroll_position/)

[javascript] view plaincopy

  1. <mce:script type="text/javascript"><!--  

  2.    

  3.    

  4. // 说明:用 Javascript 获取滚动条位置等信息   

  5. // 来源 :ThickBox 2.1    

  6. // 整理 :CodeBit.cn ( http://www.CodeBit.cn )   

  7.    

  8. function getScroll()    

  9. {   

  10.     var t, l, w, h;   

  11.        

  12.     if (document.documentElement && document.documentElement.scrollTop) {   

  13.         t = document.documentElement.scrollTop;   

  14.         l = document.documentElement.scrollLeft;   

  15.         w = document.documentElement.scrollWidth;   

  16.         h = document.documentElement.scrollHeight;   

  17.     } else if (document.body) {   

  18.         t = document.body.scrollTop;   

  19.         l = document.body.scrollLeft;   

  20.         w = document.body.scrollWidth;   

  21.         h = document.body.scrollHeight;   

  22.     }   

  23.     return { t: t, l: l, w: w, h: h };   

  24. }   

  25.    

  26. // --></mce:script>   

 

 

首先说明,这段代码是正确的。只是当document.documentElement和document.documentElement.scrollTop都有值,但是document.documentElement.scrollTop==0时,有点误导人,呵呵。

于是我改成如下:

 

[javascript] view plaincopy

  1. var top = document.body.scrollTop;  

  2. if(0==top){  

  3.     top = document.documentElement.scrollTop;  

  4. }  

  5. alert(top);  

 

 

后来发现

var top = document.body.scrollTop | document.documentElement.scrollTop;

 

这样更简单,而且在我的几种浏览器下也都OK。。。。。

 


转载于:https://my.oschina.net/122612475/blog/313478

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/546105.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里巴巴为什么让初始化集合时必须指定大小?

这是我的第 205 期分享作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;哈喽&#xff0c;亲爱的小伙伴们&#xff0c;技术学磊哥&#xff0c;进步没得说&#xff01;欢迎来到…

ios页面间跳转方式总结

转自&#xff1a;http://www.cnblogs.com/anywherego/p/3542202.html 下面以OldViewController(oldC)的按钮btn点击后跳转到NewViewController(newC)为例说明: 1.Storyboard的segues方式 鼠标点击按钮btn然后按住control键拖拽到newC页面&#xff0c;在弹出的segue页面中选择跳…

啪啪打脸!领导说:try-catch要放在循环体外!

这是我的第 206 期分享作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;哈喽&#xff0c;亲爱的小伙伴们&#xff0c;技术学磊哥&#xff0c;进步没得说&#xff01;欢迎来到…

软件项目与产品的区别与联系_软件产品和软件过程之间的区别和关系

软件项目与产品的区别与联系软件产品和软件过程 (Software product and Software process) Software product and Software process: These two words are the one which is mostly confused with each other. In this article, we are going to explain each of these in deta…

Oracle官方推荐的性能测试工具!简单、精准又直观!

这是我的第 207 期分享作者 | 武培轩来源 | 武培轩&#xff08;ID&#xff1a;wupeixuan404&#xff09;分享 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;磊哥在前面的所有性能优化的文章中都是用了这款性能测试工具——JMH&#xff0c;一直没来得及给大家…

Hadoop开发第2期---虚拟机中搭建Linux

注&#xff1a;关于如何将hadoop源码导入Eclipse详见http://pan.baidu.com/s/1hq8ArUs 一、Hadoop配置软件&#xff08;我的电脑是Windows7旗舰--64bit&#xff09; 1. VMWare专用CentOS镜像(Centos是Linux操作系统的一种)2. VMware-workstation103. hadoop-1.1.2.tar.gz4. jdk…

看故事学知识,这篇Java代理的文章妙啊!

这是我的第 208 期分享作者 | java金融来源 | java金融&#xff08;ID&#xff1a;java4299&#xff09;分享 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;什么是代理代理模式是常用的java设计模式&#xff0c;他的特征是代理类与委托类有同样的接口&#x…

阿里《Java开发手册》中的 1 个bug!

这是我的第 210 期分享作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;本来打算写一篇《阿里巴巴为什么不允许日志输出时&#xff0c;使用字符串拼接&#xff1f;》的文章&a…

驳《阿里「Java开发手册」中的1个bug》?

这是我的第 211 期分享作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;前两天写了一篇关于《阿里Java开发手册中的 1 个bug》的文章&#xff0c;评论区有点炸锅了&#xff0…

轻松学算法的秘密!可视化算法网站汇总!(附动图)

对于「算法」的第一印象&#xff0c;我相信大部分人都是一样的&#xff0c;就是一个“难”字了得。而我比较特殊&#xff0c;我的第一印象、第二印象以至第 N 印象都觉得很难&#xff0c;所以为了更好的学习和理解算法&#xff0c;我千金一掷一下买了一堆的算法书&#xff0c;有…

链表竟然比数组慢了1000多倍?(动图+性能评测)

这是我的第 215 期分享作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;数组和链表是程序中常用的两种数据结构&#xff0c;也是面试中常考的面试题之一。然而对于很多人来说…

win7安装python

2019独角兽企业重金招聘Python工程师标准>>> 官网下载 python 安装包&#xff0c;一个 .msi 文件&#xff0c;双击安装 右键[计算机]-属性-高级系统设置-环境变量&#xff0c;在[系统变量]中找到 Path 变量&#xff0c;双击&#xff0c;在值后面添加 python 的安装路…

漫画:Java如何实现热更新?

Arthas&#xff08;阿尔萨斯&#xff09;是 Alibaba 开源的一款 Java 诊断工具&#xff0c;使用它我们可以监控和排查 Java 程序&#xff0c;然而它还提供了非常实用的 Java 热更新功能。所谓的 Java 热更新是指在不重启项目的情况下实现代码的更新与替换。使用它可以实现不停机…

自动化运维工具Saltstack详细介绍

Saltstack是一个新的基础设施管理工具。目前处于快速发展阶段&#xff0c;可以看做是pssh弱化的Puppet的组合。间接的反映出了saltstack的两大功能&#xff1a;远程执行和配置管理。Saltstack使用Python开发&#xff0c;是一个非常简单易用和轻量级的管理工具。由Master和Minio…

为什么建议你使用枚举?

枚举是 JDK 1.5 新增的数据类型&#xff0c;使用枚举我们可以很好的描述一些特定的业务场景&#xff0c;比如一年中的春、夏、秋、冬&#xff0c;还有每周的周一到周天&#xff0c;还有各种颜色&#xff0c;以及可以用它来描述一些状态信息&#xff0c;比如错误码等。枚举类型不…

数据结构树二叉树计算节点_查找二叉树中叶节点的数量 数据结构

数据结构树二叉树计算节点Algorithm: 算法&#xff1a; One of the popular traversal techniques to solve this kind of problems is level order tree traversal (Read: Level Order Traversal on a Binary Tree) where we use the concept of BFS. 解决此类问题的一种流行…

重磅!阿里推出国产开源JDK!

简介Alibaba Dragonwell 是一款免费的, 生产就绪型Open JDK 发行版&#xff0c;提供长期支持&#xff0c;包括性能增强和安全修复。阿里巴巴拥有最丰富的Java应用场景&#xff0c;覆盖电商&#xff0c;金融&#xff0c;物流等众多领域&#xff0c;世界上最大的Java用户之一。Al…

安装TPCC-MySQL报错

2019独角兽企业重金招聘Python工程师标准>>> 安装TPCC-MySQL做压力测试&#xff0c;由于TPCC-MySQL是bzr工具进行版本控制的&#xff0c;所以要先安装bzr [rootmha_backup /root] #rpm -Uvh http://dl.fedoraproject.org/pub/epel/5/i386/epel-release-5-4.noarch.r…

自由职业的前半年,我是如何度过的?

生活中所受的苦&#xff0c;终会以一种形式回归。我是一个后知后觉的人&#xff0c;从 2009 年毕业到现在&#xff0c;已经有 11 年的光景了&#xff0c;参加工作的前几年我从没想过要快速的提升自己的技能&#xff0c;对待工作也没有全力以赴&#xff0c;这样的迷茫和随大流的…