`
wenrunchang123
  • 浏览: 249133 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

(转)document.body.scrollTop与document.documentElement.scrollTop兼容

 
阅读更多
这两天在写一个JS的网页右键菜单,在实现菜单定位的时候发现了这个问题:chrome居然不认识document.documentElement.scrollTop!

看前辈们的文章,纷纷表示如果有文档声明(即网页第一句的docType)的情况下,标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop.

由于在不同情况下,document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值,那到底网页的scrollTop值怎么得到呢?难道又要用javascript进行判断?

其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,可以这样:

var sTop=document.body.scrollTop+document.documentElement.scrollTop;

这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。

转载来自:http://www.jo2.org/archives/176.htm

分享到:
评论
1 楼 x269147836 2012-06-26  
var sTop=document.pageXOffset||document.body.scrollTop||document.documentElement.scrollTop||0;
在网上找到个类似这样的~

相关推荐

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

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

    解决VUE中document.body.scrollTop为0的问题

    Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD,即指定...

    document.documentElement document.documentElement.scrollTop

    if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape ...

    javascript scrollTop正解使用方法

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

    用document.documentElement取代document.body的原因分析

    上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想取得“页面可见区域高度”,可实际上返回的是“页面实际内容高度”。 那我们怎么办呢?难道加上了文档...

    获取页面长宽和滚动条的位置

    } else if(document.documentElement && document.documentElement.scrollTop) { // IE 6 Strict y = document.documentElement.scrollTop; x = document.documentElement.scrollLeft; } else if...

    document.body.scrollTop 值总为0的解决方法 比较常见的标准问题

    页面具有 DTD(或者说指定了 DOCTYPE)时,使用 document.documentElement。

    不出现滚动条移动表格

    var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } else { var clientHeight = (document....

    javascript获取网页宽高方法汇总

    document.body.clientWidth – 网页可见区域宽 document.body.clientHeight – 网页可见区域高 document.body.offsetWidth – 网页可见区域宽,包括边线和滚动条的宽 ...document.body.scrollTop – 有滚动条的时候,向

    深入浅析JavaScript中的scrollTop

    document.body.scrollTop和document.documentElement.scrollTop都可以 2、各浏览器下 scrollTop的差异 IE6/7/8/9/10: 对于没有doctype声明的页面里可以使用 document.body.scrollTop 来获取 scrollTop高度 ; ...

    菜单悬停顶部

    scrollTop = document.documentElement.scrollTop+document.body.scrollTop; height = document.getElementById("first").offsetTop; alert(scrollTop+" "+height); } function second(){ var top = 300; var...

    【JavaScript源代码】vue实现锚点定位功能.docx

     Chrome: document.body.scrollTop Firefox: document.documentElement.scrollTop Safari: window.pageYOffset  我这里是局部元素滚动,因此稍有差异。先附上html及css代码块: scroll-content为滚动区域, ...

    jquery滚动依然显示头部

    var min = document.body.scrollTop | document.documentElement.scrollTop; if (min ) { $("#J_m_nav").removeClass("nav_fixed"); $("#J_m_nav").css('display', 'none'); } else { $("#J_m_nav")....

    获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll

    } else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict yScroll = document.documentElement.scrollTop; } else if (document.body) {// all other...

    解决vue无法设置滚动位置的问题

    在Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度。 document.body.scrollTop一直是0 原因 因为vue的页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement。 页面没有DTD,即没指定...

    js中的如何定位固定层的位置

    当然有办法了,我们使用document.documentElement来取代document.body例如可以这样写: 代码如下: var top=document.documentElement.scrollTop ||document.body.scroolTop; js中的||是个好东西 ,

    doctype后如何获得body.clientHeight的方法

    在ie6中很多js脚本执行就会出现问题,一般是在获取clientWidth, clientHeight,... 比如:原来document.body.clientHeight,就要改成document.documentElement.scrollTop 为了自适应,可以改了下代码: ((docum

    JS 获取滚动条高度示例代码

    if(document.documentElement&&document.documentElement.scrollTop){ scrollTop=document.documentElement.scrollTop; }else if(document.body){ scrollTop=document.body.scrollTop; } return scrollTop; }

    通过JS 获取Mouse Position(鼠标坐标)的代码

    昨天写的脚本在获取鼠标位置的...document.body.scrollLeft,document.body.scrollTop只用于IE6以前的版本,在IE6中,对没有宣告 DOCTYPE,或者宣告的是transitional DOCTYPE,那么IE6将使用document.documentElement.

    document-scroll-element:确定可滚动的文档元素

    例如,Firefox在document.documentElement ( <html> )上滚动,而Safari在document.body ( <body> )上滚动。 此功能确定哪个文档元素是可滚动的。 例如,为了使滚动动画,通常需要编写: $('html...

Global site tag (gtag.js) - Google Analytics