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等网页语言标准不同,不同客户端环境(如分辨率不同)造成实际显示效果未能达到预期理想效果 首先我们来看一下目前市面上常见的一 ...
随机推荐
- MVC ajaxSubmit上传图片
注意事项: 1.提交form,必须引用jquery.form.min.js 2.不要使用mvc自带的Ajax.Form() 1.页面cshtml <form name="frmInpu ...
- 百度BAE环境下WordPress搭建过程
参考: 文章一:http://capbone.com/bae-wordpress/ 文章二:http://tieba.baidu.com/p/2612184581 注意点: wordpress 下载地 ...
- 学习心得:《十个利用矩阵乘法解决的经典题目》from Matrix67
本文来自:http://www.matrix67.com/blog/archives/tag/poj大牛的博文学习学习 节选如下部分:矩阵乘法的两个重要性质:一,矩阵乘法不满足交换律:二,矩阵乘法满足 ...
- GO To Definition的背后操作【VS2015 C#】
使用VS开发U3D项目时,去察看某个变量的声明,比如某组件的gameObject变量,会看到如下代码 一看似乎有点晕,这代码什么意思啊,就一个 public GameObject gameObject ...
- WebAPI使用多个xml文件生成帮助文档(转)
http://www.cnblogs.com/idoudou/p/xmldocumentation-for-web-api-include-documentation-from-beyond-the- ...
- 《WCF服务编程第三版》知识点摘录
- chrome http Request Header 修改插件
chrome http Request Header 修改插件 2013-05-31 11:03:03| 分类: JavaScript | 标签:chrome extensions chang ...
- web.xml配置文件
一.web.xml里面的标签 <display-name> <context-param> <listener> <filter> 和 <filt ...
- 关于使用Css设置Canvas画布大小的问题
问题分析 我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小.但是如果使用Css设置画布大小,则会出现问题. 问题描述 如果使用Css设置Canvas画布的大小,则导致画布按比例缩 ...
- JS构造函数的用法和JS原型
$(function(){ var rec = new Rectangle(5, 10); //alert(rec.width + "*" + rec.height + " ...