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) 被放置在 || 的中间位置。
因为当 数字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;
相关推荐
IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ; 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ; Safari: safari 比较特别,有...
document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异示例:...
css样式: 复制代码代码如下: <style type=”text/css”> body{_background-attachment:fixed; _background-image:url(nothing);..._top:[removed]documentElement.scrollTop+document.documentElement.clie
切入正题,以下的IE6下CSS的兼容性写法: 复制代码代码如下:/* 修正IE6振动bug */html,* html body{background-image:url(about:blank);background-attachment:fixed;}/* IE6 头部固定 */...
火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
简单易懂jquery 返回顶部例子,图片按钮,渐入渐隐,可以直接引用,兼容ie 6,7,8,9,10,11,等等,
首先这里声明一下,关于我测试浏览器的版本是chrome15.0.874.121 Firefox 8.01 IE9 IETester 下面的代码关于声明 1:获得滚动条的情况 代码如下:function getScroll(){ var t, l, w, h; if (document....
含义:滚动条高度 ...IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ; 对于有doctype声明的页面则可以使用 document.documentElement.scrollTop ;
本文实例讲述了js中scrollTop()方法和scroll()方法用法。分享给大家供大家参考,具体如下: 设置滚动条据顶部的高度: $("div").scrollTop(100); //把 scroll top offset 设置为 100px 获得滚动条的高度: $("div...
CSS兼容性height/width, position:fixed, …脚本问题:Java script 兼容性DOM, Date.getYear, scrollTop, …缺陷(bug)与特性(feature)IE: 盒模型,float,text-alignIE: filter, 资源太大,传百度网盘了...
scrollTop 原生 JavaScript 实现的回到顶部库,适应 PC 和移动,兼容到 IE7
Js中 关于top、clientTop、scrollTop、offsetTop等
positon:fixed 让HTML元素脱离文档流固定在浏览器的某个位置 网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位 浮动导航条的样式,重要的是position:fixed;bottom:60px;(浮动导航底部距离...
2、scrollTop/scrollLeft:滚动条卷去的高度/宽度(这两个属性是唯一“可读写”的属性) box.scrollTop = 0 // 直接回到容器的顶部 我们的scrollTop的值是存在边界值(最大和最小值),我们设置的值比最小值小或者比...
4、到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间断循环滚动效果就出现了。 html 源码 代码如下:<!DOCTYPE html PUBLIC
本文实例讲述了jQuery中scrollTop()方法用法。分享给大家供大家参考。具体分析如下: 此方法返回或设置匹配元素的滚动条的垂直偏移量。 语法结构一: 当scrollTop()方法不带有参数的时候是返回匹配元素相对滚动条顶部...
**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码(支持左移/右移功能)(本示例为上下两行图片进行双行滚动) **实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动...
这类圆角弹出框其实用得还是很广泛的,用CSS3可以很容易的出现,但是考虑到浏览器兼容问题,这类还是需要用图片实现了 主要代码如下: 代码如下://弹出层剧中 function popup(popupName) { var _scrollHeight = $...
document.body.scrollTop用法