脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS中完美兼容各大浏览器的scrolltop方法

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

 更新时间：2015年04月17日 14:17:58   投稿：hebedich  
最近用到scrolloTop()想去获取滚动条距离顶部的距离，结果只有chrome下面可以正常的获取scrollTop，ff和ie下这个值都等于0，使得许多效果比如屏幕滚动等等均无法正常实现。究其原因是scrollTop()在各个浏览器中的兼容性问题，今天我们就来详细探讨下。

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赋值语句。

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

您可能感兴趣的文章:

相关文章

  • JavaScript 防抖和节流详解

    JavaScript 防抖和节流详解

    这篇文章主要介绍了JavaScript 防抖和节流,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • js实现文件上传表单域美化特效

    js实现文件上传表单域美化特效

    本文为大家分享的是一款效果非常酷的文件上传表单域美化特效。有7种不同的美化文件上传域的效果，很时尚，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JavaScript新手必看之var在for循环中的坑

    JavaScript新手必看之var在for循环中的坑

    var这个关键字在JS当中是相当常用的，但同时配合到for循环的话会出现不符合预期的运行结果，所以本文就来为大家讲讲如何避免这种情况的出现
    2023-05-05
  • js页面跳转的问题(跳转到父页面、最外层页面、本页面)

    js页面跳转的问题(跳转到父页面、最外层页面、本页面)

    js页面跳转：本页面跳转,上一层页面跳转，最外层的页面跳转，下面为大家大家分享下不同页面之家的跳转问题，感兴趣的朋友可以学习下
    2013-08-08
  • JS快速实现简单计算器

    JS快速实现简单计算器

    这篇文章主要为大家详细介绍了JS快速实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-04-04
  • JavaScript实现网页留言板功能

    JavaScript实现网页留言板功能

    这篇文章主要为大家详细介绍了JavaScript实现网页留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 小程序实现长按保存图片的方法

    小程序实现长按保存图片的方法

    这篇文章主要介绍了小程序实现长按保存图片的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Typescript实现栈的方法示例

    Typescript实现栈的方法示例

    本文主要介绍了Typescript实现栈的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-08-08
  • JS区分浏览器页面是刷新还是关闭

    JS区分浏览器页面是刷新还是关闭

    在web开发中我们经常各种各样的需求。今天小编给大家介绍JS区分浏览器页面是刷新还是关闭标签页，非常实用，感兴趣的童鞋参考下吧
    2016-04-04
  • leaflet基本使用示例教程

    leaflet基本使用示例教程

    这篇文章主要介绍了leaflet基本使用示例教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12

最新评论