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;
}
document.body.scrollTop 各浏览器兼容性解决的更多相关文章
- AngularJS进阶(三十五)浏览器兼容性解决之道
浏览器兼容性解决之道 前言 浏览器兼容性一直是前端开发中不得不面对的一个问题.而最突出的就是IE.对绝大多数公司来说,兼容IE6的性价比已经很低,而IE7则几乎已经绝迹.所以,常见的兼容性下限是IE8 ...
- document.documentElement.scrollTop指定位置失效解决办法
近期在vue的H5项目中,做指定位置定位的时候发现使用document.documentElement.scrollTop一直不生效. 解决办法是document.documentElement.sc ...
- 浏览器hack总结 详细的浏览器兼容性解决方法
由于各浏览器对页面的解析不同,会导致页面在不同浏览器中显示的样式不一致,为了保持页面的统一,经常需要对浏览器进行兼容性问题的调试. CSS Hack 面对浏览器诸多的兼容性问题,经常需要通过CSS样式 ...
- document.body.scrollTop值为0的解决方法[转]
做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.onscroll=function () { ...
- IE浏览器和Firefox浏览器兼容性问题及解决办法
IE浏览器和Firefox浏览器兼容性问题及解决办法 为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox : 1.//w ...
- (转) 淘淘商城系列——解决KindEditor上传图片浏览器兼容性问题
http://blog.csdn.net/yerenyuan_pku/article/details/72808229 上文我们已实现了图片上传功能,但是有个问题,那就是对浏览器兼容性不够,因为Map ...
- document.body.scrollTop无效的解决方法
1.document.body.scrollTop = 0 有时候不生效,两种解决方案,试试看. 1-1.设置:document.documentElement.scrollTop = 0;1-2.设 ...
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...
- web前端开发浏览器兼容性 - 持续更新
浏览器兼容性问题又被称为网页或网站兼容性问题:不同浏览器内核及所支持的html等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果 首先我们来看一下目前市面上常见的一 ...
随机推荐
- 二维背包(钟神想要的)(不是DP)
[问题描述] 背包是个好东西,希望我也有.给你一个二维的背包,它的体积是? × ?.现在你有一些大小为1× 2和1×3的物品,每个物品有自己的价值.你希望往背包里面装一些物品,使得它们的价值和最大,问 ...
- java 20 -1 递归的概述和案例
/* * 递归:方法定义中调用方法本身的现象 * * 方法的嵌套调用,这不是递归. * Math.max(Math.max(a,b),c); * * public void show(int n) { ...
- 转: 最值得阅读学习的 10 个 C 语言开源项目代码
from: http://www.iteye.com/news/29665 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同 ...
- 两种方式判断类的存在→className getAttribute
通过className获取 var p = document.getElementsByTagName('p'); for(var i = 0;i <p.length;i++){ if(p[i] ...
- poj1144
Network Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 12521 Accepted: 5760 Descript ...
- 【WPF】WPF通过RelativeSource绑定父控件的属性
1.后台代码实现绑定父控件的属性 RelativeSource rs = new RelativeSource(RelativeSourceMode.FindAncestor); //设定为离自己控件 ...
- VC/Wince 实现仿Win8 Metro风格界面3——按钮移动交换、删除、添加快捷方式(附效果图)
上一篇文章写了如何进行页面滑动切换,今天我讲一下如何实现两个按钮拖动交换位置,包括同一个页面按钮交换或者两个页面之间的按钮交换.另外就是如何拖动删除界面上的快捷方式.按钮交换和拖动删除,这两个功能基本 ...
- 在Linux用libcurl.a在链接的时候出错
其实出错是因为curl链接的时候需要别的库.我用如下方法解决 1.http://curl.haxx.se/download/curl-7.45.0.tar.gz官网下载源码 2../configure ...
- RequiredFieldValidator 根据group组来触发验证
今天在开发过程中遇到了这样一个问题 在这个用户添加界面中,我使用了多个验证控件RequiredFieldValidator,分别控制用户名密码.在默认情况下,当单击“检查用户名”时,密码的验证控件也被 ...
- 从0开始学Java——从jsp到servlet转换的各种辅助元素介绍
1. 指示元素,<%@指示元素 [属性=值]* %> 其中指示元素包括page, include, 和tablib三个. 其中 属性=值 可以有多对. 其中page用来告知容器如何转译目 ...