`
liuguofeng
  • 浏览: 450091 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

关于scrolltop 兼容 IE6/7/8, Safari,FF的方法

 
阅读更多

1、各浏览器下 scrollTop的差异
IE6/7/8:
对于没有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)   被放置在 || 的中间位置。
因为当 数字0undefine 进行 或运算时,系统默认返回最后一个值。即或运算中 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;

分享到:
评论

相关推荐

    javascript图片完全固定在左、右、上、下,兼容IE6

    ### JavaScript 图片完全固定在左右两边,兼容IE6的知识点 #### 一、问题背景与需求分析 在早期的浏览器版本中,特别是 Internet Explorer 6 (IE6),很多 CSS 特性并不支持或者存在兼容性问题。其中,“position: ...

    jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)

    在这个教程中,我们将探讨如何使用jQuery创建一个友好的、按字母顺序排列的页面索引,同时确保兼容老版本的Internet Explorer(如IE6、7、8)。这种方法在处理大量数据时非常有用,例如在一个FAQ页面中,用户可以...

    jquery平滑返回顶部效果(兼容IE6)

    然而,由于IE6的性能限制和对CSS、JavaScript的兼容性问题,可能需要特别注意一些CSS样式和JavaScript代码的编写,避免使用IE6不支持的特性。例如,使用传统CSS选择器而不是CSS3新特性,避免使用某些JavaScript的...

    火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    在探讨“火狐、谷歌、IE关于`document.body.scrollTop`和`document.documentElement.scrollTop`以及值为0的问题”这一主题时,我们深入分析了浏览器在处理页面滚动位置时的不同行为,尤其是当滚动位置值始终为0时的...

    css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法

    ### CSS兼容IE6、IE7及Firefox的Fixed定位方法 #### 背景与目标 在Web开发过程中,为了确保网站在不同浏览器上的兼容性,开发者经常需要采取一系列措施来应对旧版本浏览器(如IE6、IE7)的限制。其中,`position: ...

    固定位置显示弹出层(兼容IE6,IE8,FF)

    然而,不同的浏览器对CSS的支持程度不同,尤其是老版本的Internet Explorer(如IE6和IE8)存在一些兼容性问题。本文将详细解释如何通过CSS实现这种效果,并且兼容IE6、IE8以及Firefox等主流浏览器。 首先,我们要...

    HTML 纯CSS浮窗兼容IE6+

    在互联网早期,IE6是广泛使用的浏览器之一,但因其对现代Web标准的支持有限,开发者需要特别处理以确保兼容性。本文将深入探讨如何使用CSS解决这一挑战,创建一个在所有主流浏览器(包括IE6)上都能正常工作的浮窗...

    CSS在网页上实现浮动层跟随滚动条特效(兼容IE6)

    CSS 实现浮动层跟随滚动条特效(兼容IE6) 在网页上实现浮动层跟随滚动条特效是非常常见的要求,特别是在网站广告展示时。实现这种特效有多种方法,本节将介绍两种比较成功的实现方法,它们都能完美兼容各大浏览器...

    DIV+CSS解决各浏览器兼容问题

    然而,不同的浏览器由于其内核差异及版本更新速度不一,常常导致同样的代码在不同浏览器下呈现的效果各异,尤其是对于老旧的IE系列浏览器(如IE6、IE7、IE8)以及较新版本的Firefox等,这种兼容性问题尤为突出。...

    检测低版本IE6.0并提示下载新版本IE的javascript脚本

    这种方法简洁有效,适用于需要对IE6进行特别处理的情况。 ```html <!--[if lte IE 6]> <div id="ie6-warning"> 使用Internet Explorer 6或其他旧版IE在本页的显示效果可能有差异。建议您升级到新版 ...

    IE6不支持fixed解决方法

    在网页开发过程中,由于历史遗留原因,Internet Explorer 6(简称IE6)存在许多与现代浏览器不兼容的问题,其中之一就是不支持CSS中的`fixed`定位。`fixed`定位是一种常用的布局方式,可以让元素相对于浏览器窗口...

    ie11ScrollTo_html5_DEMO_

    在其他现代浏览器中,如Chrome、Firefox和Safari,这个方法通常工作得很好,但在IE11中,它可能不受支持或者表现不一致。这导致了开发者在创建跨浏览器兼容的网页时需要额外的工作。 在"ie11ScrollTo.html"这个文件...

    底部固定悬浮工具栏jQuery代码兼容ie6+主流浏览器

    "底部固定悬浮工具栏jQuery代码兼容ie6+主流浏览器"这个资源提供了这样一个功能的实现,适用于多种浏览器环境,包括Internet Explorer 6到9以及Chrome和Firefox。 jQuery是一款广泛使用的JavaScript库,简化了...

    HTML IE6 纯CSS 解决 position fixed 的问题

    考虑到IE6的市场份额已经非常低,且存在诸多兼容性问题,一种更长远的解决方案是鼓励用户升级浏览器或切换到更现代的浏览器。这可以通过在网站上显示提示信息或者使用渐进增强的策略来实现。 在处理这个问题时,...

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

    IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ; 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ; Safari: safari 比较特别,有...

    javascript scrollTop正解使用方法

    document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异示例:...

    完美解决kindeditor IE11看不到弹出框,兼容性问题

    总的来说,解决KindEditor在IE11下的弹出框兼容性问题需要对代码进行适配,特别是关于浏览器检测和获取滚动位置的部分。通过对代码进行相应调整,我们可以确保KindEditor在IE11中能够正常显示和操作弹出框,提供一致...

    css ie6 fiexd属性解决方法

    在探讨“css ie6 fixed属性解决方法”这一主题时,我们不得不面对一个历史遗留问题:Internet Explorer 6(IE6)对于CSS3中fixed定位的支持不足。IE6发布于2001年,其浏览器内核对现代Web标准的支持有限,尤其是在...

    scrollTop原生JavaScript实现的回到顶部库

    本文将详细介绍如何使用原生JavaScript实现一个适应PC和移动设备,且兼容到IE7的"scrollTop"回到顶部库。 一、scrollTop属性 在JavaScript中,`scrollTop`属性用于获取或设置元素的垂直滚动位置。对于一个元素(如...

Global site tag (gtag.js) - Google Analytics