JS中完美兼容各大浏览器的scrolltop方法_javascript技巧

1、各浏览器下 scrollTop的差异

IE6/7/8/9/10:

对于没有doctype声明的页面里可以使用  document.body.scrollTop 来获取 scrollTop高度 ;
对于有doctype声明的页面则可以使用 document.documentElement.scrollTop  ;

Safari:

safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset ;

Firefox:

火狐等等相对标准些的浏览器就省心多了,直接用 document.documentElement.scrollTop ;

2、获取scrollTop值

完美的获取scrollTop 赋值短语 :

复制代码 代码如下:

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

通过这句赋值就能在任何情况下获得scrollTop 值。

仔细观察这句赋值,你发现啥了没??
没错, 就是 window.pageYOffset  (Safari)   被放置在 || 的中间位置。

因为当 数字0 与 undefine 进行 或运算时,系统默认返回最后一个值。即或运算中 0 == undefine ;

当页面滚动条刚好在最顶端,即scrollTop值为 0 时,IE 下 window.pageYOffset  (Safari) 返回为 undefine ,此时将 window.pageYOffset  (Safari) 放在或运算最后面时, scrollTop 返回 undefine ,  undefine 用在接下去的运算就会报错咯。

而其他浏览器 无论 scrollTop 赋值或运算顺序如何都不会返回 undefine.  可以安全使用..

所以说到头还是IE的问题咯. 杯具…

精神有点恍惚,不知道有没有表达清楚。
不过最后总结出来这句实验过OK,大家放心使用。

复制代码 代码如下:

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

这是完美的获取scrollTop赋值语句。

以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2024-11-03 13:59:27

JS中完美兼容各大浏览器的scrolltop方法_javascript技巧的相关文章

JS中完美兼容各大浏览器的scrolltop方法

 1.各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 : 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop : Safari: safari 比较特别,有自己获取scrollTop的函数 : window.pageYOffset : Firefox: 火狐等等相对标准些的浏览器就省心多了,直接用

HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列

 HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列  本文给大家分享的是使用HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列的方法和示例,非常的实用,特别是在BS架构的企业级应用,有需要的小伙伴可以参考下.     BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好.一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢? 这个需求常见的解决方案是使

js判断当前页面用什么浏览器打开的方法_javascript技巧

最近做很多HTML5的项目,很多页面会通过微信微博等SNS分享出去.在分享页面上提供公司APP的下载.但是在很多应用的浏览器中,点击下载链接无法下载应用.那么针对这些浏览器我们需要给用户提示从safari或者系统自带的浏览器打开分享页面,通过js就可以判断当前页面是在什么浏览器打开的. 以下是一段示例代码,注释中表明了通过JS如何判断是否在微信浏览器打开,是否在QQ空间浏览器,是否在新浪微博打开.当然可以做得更完善一点,再加上判断是在移动设备打开还是在PC端浏览器打开的,这一点可以参考本文,更加

JS打开新窗口防止被浏览器阻止的方法_javascript技巧

本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器阻止呢?其实办法还是有的,这里我们就来分析一下如何解决这个问题 我最近也遇到了这样的问题,所以就把弹出新窗口的方法分享给大家.欢迎大家补充哦... 第一种.使用原生javascript的window.open()方法(大部分情况下会被浏览自阻止) 第二种.模拟表单(form)提交,原理是指定表单的a

HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列_javascript技巧

BS架构的企业级应用中,当一个表格列数较多时,用户一个常见的需求就是把前面几个重要的列固定住,这样拖动滚动条时固定的列会方便用户查看数据,用户体验很好.一些重量级的JS组件库也都有这个功能,那么有没有更简单的方法实现这个功能呢? 这个需求常见的解决方案是使用表格拼接的方法,这个方案如果要制作静态的网页,或者功能简单的动态页面,逻辑比较简单,技术上也不复杂,很容易实现,但是如果要做成组件,动态功能较多的话,就需要写大量的冗余代码,难以维护,甚至于一个简单的功能,都需要写很多的代码,比如事件处理等,

js中substring和substr两者区别和使用方法_javascript技巧

在开始之前,先回顾下js中下标(数组元素/字符串中字符下标): 下标总是从0开始计数,例如 var arr = [1,2,3];//数组的长度为3,元素下标依次为:0,1,2 arr[0] = 1,arr[1]=2.. 字符串类似:如var s = "hello"://字符串长度为5,第一个字符'h'的下标为0,依次类推 String.substring( ):用于返回一个字符串的子串 用法如下:string.substring(from, to) 其中from指代要抽去的子串第一个字

js中利用tagname和id获取元素的方法_javascript技巧

本文分享了js中利用tagname和id获取元素的3种方法,供大家参考,具体内容如下 方法一:整体法,先获取所有的元素,再通过ai+-b的方法来算出需要的元素 方法二:数组法,在全局环境下建立空数组,遇到需要循环的结构时,在循环中获取元素,并放入数组 方法三:函数法,遇到相同的几组元素时,只操作一组元素,并用函数传参来实现所有的效果 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta cha

js中通过getElementsByName访问name集合对象的方法_javascript技巧

1.查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合. 2.这个集合可以作为数组来对待,length属性的值表示集合的个数. 3.因为在html页面中,name不能唯一确定一个元素,所以方法的名称为getElementsByName而不是getElementByName <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

js实现完美兼容各大浏览器的人民币大小写相互转换_javascript技巧

/*小写转大写*/ var xcc= "12.22"; document.write(xcc+"=>"+formatRMB(xcc)+"<br/>"); /*大写转小写*/ var rrrr = "壹拾贰元贰角贰分"; document.write(rrrr+"=>"+parseRMB(rrrr)); 输出结果: 12.22=>壹拾贰元贰角贰分 壹拾贰元贰角贰分=>12.