浏览器对body节点scrollTop解析的差异
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.box{border:1px solid pink; background:#eee; height:200px;}
.box:hover{background:cyan;}
.bg-pink{background:pink;}
.h800{height:800px;}
.brd2g{border:2px solid green;}
.over-a{overflow:auto;}
body{ behavior:url(csshover.htc);}
</style>
<script type="text/javascript" src="jquery1.10min.js"></script>
</head>
<body>
<div class="box"></div> <hr />
<div class="box over-a" id="wrap">
<div class="brd2g h800 bg-pink" id="con">水电费电费都水电费电费</div>
</div>
<div class="h800 brd2g">very high</div>
<script>
var body = document.body;
var html = document.documentElement;
window.scrollTo(0, 400);
console.log('html.scrollHeight = ' + html.scrollHeight );
console.log('html.clientHeight = ' + html.clientHeight );
console.log('html.scrollTop = ' + html.scrollTop );
console.log('body.scrollHeight = ' + body.scrollHeight );
console.log('body.clientHeight = ' + body.clientHeight );
console.log('body.scrollTop = ' + body.scrollTop );
</script>
</body>
</html>
chrome:
html.scrollHeight = 1242
html.clientHeight = 278
html.scrollTop = 0
body.scrollHeight = 1242
body.clientHeight = 1226
body.scrollTop = 400
~~~scrollHeight>clientHeight 滚动条属于html元素的，但是html.scrollTop却为0，scrollTop被认为是body元素的，这里有点不合理，scrollTop一般都是带滚动条元素才有的
ie8:
html.scrollHeight = 1242
html.clientHeight = 254
html.scrollTop = 400
body.scrollHeight = 1226
body.clientHeight = 1226
body.scrollTop = 0
~~~scrollHeight>clientHeight 滚动条属于html元素的，html.scrollTop正常
firefox:
html.scrollHeight = 1242
html.clientHeight = 294
html.scrollTop = 400
body.scrollHeight = 1226
body.clientHeight = 1226
body.scrollTop = 0
~~~scrollHeight>clientHeight 滚动条属于html元素的，html.scrollTop正常
~~~注意 chrome下 html元素scrollTop始终为0, 页面的滚动高度从 body.scrolltop获得
浏览器对body节点scrollTop解析的差异的更多相关文章
- Spring源码情操陶冶-自定义节点的解析
本文承接前文Spring源码情操陶冶-DefaultBeanDefinitionDocumentReader#parseBeanDefinitions,特开辟出一块新地来啃啃这块有意思的骨头 自定义节 ...
- Mybatis源码解析，一步一步从浅入深（五）：mapper节点的解析
在上一篇文章Mybatis源码解析,一步一步从浅入深(四):将configuration.xml的解析到Configuration对象实例中我们谈到了properties,settings,envir ...
- 网站怎么布局能解决不同浏览器对CSS解析的差异,使用css reset
很多地方都提到过CSS Reset这个概念,而且细心的朋友会发现,许多大网站的CSS文件中也含有CSS Reset内容. CSS Reset是什么? 在HTML标签在浏览器里有默认的样式,例如 p 标 ...
- 浏览器-05 HTML和CSS解析1
一个浏览器内核几个主要部分,HTML/CSS解析器,网络处理,JavaScript引擎,2D/3D图形引擎,多媒体支持等; HTML 解析和 DOM 网页基本结构 一个网页(Page),每个Page都 ...
- 浏览器-06 HTML和CSS解析2
选择器 其实现由CSSSelector类来完成: CSSSelector的作用是储存从解析器生成的结果信息; 这里匹配指的是当需要为每个DOM中的节点计算样式时,WebKit需要根据当前的节点信息来从 ...
- 浏览器获取正确的scrollTop值
window.pageYOffset 被所有浏览器支持除了 IE 6, IE 7, IE 8, 不关doctype的事, 注IE9 开始支持此属性. window.scrollY 被Firefox, ...
- u-boot-2018.09 DTS上 I2C节点的解析 （转）
这篇理下uboot上I2C总线挂载设备的整个流程. 其他总线(如SPI等)应是类同的思路. uboot 中,以max8997挂载到s3c24xx i2c总线为例, dts里面的写法如下 aliases ...
- kubernetes多节点部署解析
注:以下操作均基于centos7系统. 安装ansible ansilbe可以通过yum或者pip安装,由于kubernetes-ansible用到了密码,故而还需要安装sshpass: pip in ...
- chrome浏览器Timing内各字段解析
Queueing请求文件顺序的的排序 Stalled是浏览器得到要发出这个请求的指令到请求可以发出的等待时间,一般是代理协商.以及等待可复用的TCP连接释放的时间,不包括DNS查询.建立TCP连接 ...
随机推荐
- div中央
.histroyMsgSearch{ background:#Fff; text-align: center; } CSS 怎样使DIV层水平居中 今天用CSS碰到个非常棘手的问题,DIV本身未定义 ...
- 关于给javascript对象添加、删除、修改对象的属性
以下是自己总结的几种方法 利用动态特性 function Person(){}; var person = new Person(); person.name = 'yy'; person.gende ...
- zoj 3714 Java Beans
/*很简单的一题,求连续的m位,求总和最多的值,循环找一下,就出来了*/ #include<stdio.h> ]; int main(int argc, char* argv[]) { i ...
- iOS 切割图片
- (UIImage *)CutImageWithImage:(UIImage *)image withRect:(CGRect)rect { //使用CGImageCreateWithImageIn ...
- 【LINUX】SHELL syntax error:unexpected end of file
解决思路: DOS下文件和Linux下文件格式差异问题导致的. DOS下的文本文件是以\r\n作为断行标志的,表示成十六进制就是0D 0A.而Unix下的文本文件是以\n作为断行标志的,表示成十六进制 ...
- 【转】CoreData以及MagicalRecord （二）
3. 运行时类与对象 NSManagedObject Managed Object 表示数据文件中的一条记录,每一个Managed Object在内存中对应的实体(Entity)的一个数据表示.Man ...
- IE 弹出提示：由于无法验证发布者,所以Windows 已经阻止此软件
由于无法验证发布者,所以Windows 已经阻止此软件 按如下步骤:1.打开Internet Explorer---菜单栏点“工具”---Internet选项--安全---自定义级别---安全设置-- ...
- php基础知识（很简单一套适合零基础的朋友学习）
红色的一般都是重点,还有自己的一些废话 运算符 算术运算符: 基本运算(除数不能为0) 比较运算符: 大小比较(类型比较), 如果两个类型不一样,系统会自动转换成统一类型 赋值运算符: 基本赋值和运算 ...
- [LeetCode]题解（python）：001-Two-Sum
题目来源: https://leetcode.com/problems/two-sum/ 题意分析: 这道题目是输入一个数组和target,要在一个数组中找到两个数字,其和为target,从小到大输出 ...
- 高质量程序设计指南C/C++语言——malloc/free使用要点