document.body.scrollTop 各浏览器兼容性解决

  document.compatMode:获取当前浏览器采用的渲染方式。主要是浏览器的模式,有两个:BackCompat,CSS1Compat。其中前者是怪异模式,后者是标准模式。

    IE默认是BackCompat模式,Gecko内核的浏览器只在table中图片层上不同,可以认为CSS1Compat标准模式document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth; 
  当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。 
  浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。 
  一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码: 

if (document.compatMode == \"BackCompat\") 

  cWidth = document.body.clientWidth; 
  cHeight = document.body.clientHeight; 
  sWidth = document.body.scrollWidth; 
  sHeight = document.body.scrollHeight; 
  sLeft = document.body.scrollLeft; 
  sTop = document.body.scrollTop; 

else 

  //document.compatMode == \"CSS1Compat\" 
  cWidth = document.documentElement.clientWidth; 
  cHeight = document.documentElement.clientHeight; 
  sWidth = document.documentElement.scrollWidth; 
  sHeight = document.documentElement.scrollHeight; 
  sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; 
  sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop; 
}

时间: 2024-10-11 07:15:34

document.body.scrollTop 各浏览器兼容性解决的相关文章

浏览器hack总结 详细的浏览器兼容性解决方法

由于各浏览器对页面的解析不同,会导致页面在不同浏览器中显示的样式不一致,为了保持页面的统一,经常需要对浏览器进行兼容性问题的调试. CSS Hack 面对浏览器诸多的兼容性问题,经常需要通过CSS样式来调试,其中用的最多的就是CSS Hack.所谓CSS Hack就是针对不同的浏览器书写不同的CSS样式,通过使用某个浏览器单独识别的样式代码,控制该浏览器的显示效果.CSS Hack主要分为两类 CSS 选择器Hack CSS选择器Hack是指通过在CSS选择器的前面,加上一些只有特定浏览器才能识

一则浏览器兼容性解决案例(搜狗)

最近有个页面在火狐,IE等主流浏览器都OK,但是在搜狗就是不行,搜狗浏览器是比较DT的浏览器,很多兼容性需要考虑,网站1个DIV内的<P>标签无法换行,怎么调试都不行,最后发现利用搜狗浏览器的高速模式居然OK了,发现搜狗的高速模式是:IE的内核.思路出来了:强制在页面加载的时候告诉浏览器,强制用IE内核就可以了. <meta http-equiv="X-UA-Compatible" content="IE=edge">

parent.Menu.document.aspnetForm.submit() 的浏览器兼容性问题

最近在改造升级一个旧的项目,引入jquery 后发现 1 function changeCulture() { 2 var culture = getCookie("PreferredCulture"); 3 4 if (culture == "" || culture == "en-us") 5 culture = "zh-cn"; 6 else 7 culture = "en-us"; 8 9 addC

scrollTop浏览器兼容性获取和设置方法

最近用到scrolloTop()想去获取滚动条距离顶部的距离,结果只有chrome下面可以正常的获取scrollTop,结果ff和ie下这个值都等于0,使得许多效果比如屏幕滚动等等均无法正常实现.究其原因是scrollTop()在各个浏览器中的兼容性问题,在ff和ie,以及是否有doctype声明的时候都会有不同的效果. 下面是兼容各种浏览器的写法,分别为获取当前的scrollTop和设置scrollTop: //兼容方式获取scrolltop以及设置scrolltop function get

JS兼容性问题---Document的scrollTop

题目: 获取滚动条滚动过的距离 方案: var scrollTop = document.documentElement.scrollTop; 不兼容浏览器: Chrome 原因: Chrome不支持document.documentElement.scrollTob 解决方案: var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 测试后结果: 完美解决

关于document.body.scrollTop 的谷歌,火狐浏览器兼容问题

最近开发页面, 出现一个问题, 弹框在谷歌浏览器正常,在火狐浏览器中, 当滚动条滚动之后,弹框就显示在上面,也就是说document.body.scrollTop 它只适用于google浏览器, 火狐浏览器就要改为document.documentElement.scrollTop,但是如果做兼容的话,我的解决方法是document.documentElement.scrollTop + document.body.scrollTop. 这样就解决的不兼容的问题.

每日分享!~ 如何解决获取卷曲高度的问题,document.body.scrollTop为什么在pc端拿不到值

document.scrollingElement.scrollTop 时间挺快的- 又是四月的最后一天了!好了进入今天的正题了.你在做项目的时候,经常会不会搞混document.documentElement.scrollTop,和document.body.scrollTop呢? 在以前我也是经常搞混,为什么我监听了scroll是正确的? 比如我在pc 端使用了document.body.scrollTop去获取当前的窗口的高度,始终是0,正在着急为什么是0??? 到底哪里错了.找了半天可能

常见浏览器兼容性问题与解决方式

所谓的浏览器兼容性问题,是指由于不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,不管用户用什么浏览器来查看我们的站点或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发者常常会碰到和必需要解决的问题. 在学习浏览器兼容性之前,我想把前端开发者划分为两类: 第一类是精确依照设计图开发的前端开发者,能够说是精确到1px的,他们非常easy就会发现设计图的不足,而且在非常少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览

怎么解决浏览器兼容性问题

怎么解决浏览器兼容性问题 所有浏览器 通用 height: 100px;IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 1.内外边距被统一: 不同浏览器对HTML标记所具有的内外边距属性具有不同的定义.因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码:*{margin:0px;padding:0px;}借于此,所有标记