<!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解析的差异的更多相关文章

  1. Spring源码情操陶冶-自定义节点的解析

    本文承接前文Spring源码情操陶冶-DefaultBeanDefinitionDocumentReader#parseBeanDefinitions,特开辟出一块新地来啃啃这块有意思的骨头 自定义节 ...

  2. Mybatis源码解析，一步一步从浅入深（五）：mapper节点的解析

    在上一篇文章Mybatis源码解析,一步一步从浅入深(四):将configuration.xml的解析到Configuration对象实例中我们谈到了properties,settings,envir ...

  3. 网站怎么布局能解决不同浏览器对CSS解析的差异,使用css reset

    很多地方都提到过CSS Reset这个概念,而且细心的朋友会发现,许多大网站的CSS文件中也含有CSS Reset内容. CSS Reset是什么? 在HTML标签在浏览器里有默认的样式,例如 p 标 ...

  4. 浏览器-05 HTML和CSS解析1

    一个浏览器内核几个主要部分,HTML/CSS解析器,网络处理,JavaScript引擎,2D/3D图形引擎,多媒体支持等; HTML 解析和 DOM 网页基本结构 一个网页(Page),每个Page都 ...

  5. 浏览器-06 HTML和CSS解析2

    选择器 其实现由CSSSelector类来完成: CSSSelector的作用是储存从解析器生成的结果信息; 这里匹配指的是当需要为每个DOM中的节点计算样式时,WebKit需要根据当前的节点信息来从 ...

  6. 浏览器获取正确的scrollTop值

    window.pageYOffset 被所有浏览器支持除了 IE 6, IE 7, IE 8, 不关doctype的事, 注IE9 开始支持此属性. window.scrollY 被Firefox, ...

  7. u-boot-2018.09 DTS上 I2C节点的解析 （转）

    这篇理下uboot上I2C总线挂载设备的整个流程. 其他总线(如SPI等)应是类同的思路. uboot 中,以max8997挂载到s3c24xx i2c总线为例, dts里面的写法如下 aliases ...

  8. kubernetes多节点部署解析

    注:以下操作均基于centos7系统. 安装ansible ansilbe可以通过yum或者pip安装,由于kubernetes-ansible用到了密码,故而还需要安装sshpass: pip in ...

  9. chrome浏览器Timing内各字段解析

    Queueing请求文件顺序的的排序   Stalled是浏览器得到要发出这个请求的指令到请求可以发出的等待时间,一般是代理协商.以及等待可复用的TCP连接释放的时间,不包括DNS查询.建立TCP连接 ...

随机推荐

  1. javascript - Show mouse cursor in phantom.js - Stack Overflow

    javascript - Show mouse cursor in phantom.js - Stack Overflow Show mouse cursor in phantom.js

  2. windows service 的创建 安装 调试 错误回发

    关于如何快速创建一个windows服务 1.在vs中创建windows服务 名称:你要写的服务名称 位置:创建服务所在的位置 点击确定 2.代码编写 3.添加安装程序 点击添加安装程序出现 分别右击设 ...

  3. HtmlAgilityPack --解析Html源码

    最近项目需要从网络上抓取一下数据解析Html源码,奈何正则表达式难写,于是网上搜索找到了“ HtmlAgilityPack”类库,敏捷开发,果然效率非同寻常. 在此做笔记,写下心得,顺便给自己总结一下 ...

  4. iOS工程上传AppStore时遇到的问题“ERROR ITMS-90046”解析

    在我们将代码写完整,测试没有bug之后,我们就可以将它上传到AppStore了,上传的过程只要操作正确并不会有太大的问题,但是打包的过程中会出现一些小问题,导致打的包不能上传或者上传的时候会出现错误. ...

  5. ajax_异步交互-get/post方式

    Ajax的异步交互: 客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做任何其他事情(不等). 实现Ajax的异步交互步骤(举例说明): get方式: 1.创建XMLHttpReq ...

  6. Exponentiation

    Description Problems involving the computation of exact values of very large magnitude and precision ...

  7. BZOJ 1034: [ZJOI2008]泡泡堂BNB( 贪心 )

    贪心...用最弱的赢最弱的,用最强的赢最强的,否则用最弱的和最强的比... (贴个官方题解:将双方的选手均按从强到弱排序,然后第一次扫描尽可能用当前剩下的选手中能赢对手当前最强选手中最弱的一个去赢得胜 ...

  8. BZOJ 1452: [JSOI2009]Count(二维BIT)

    为每一个权值开一个二维树状数组. ------------------------------------------------------------------------- #include& ...

  9. BZOJ 1001: [BeiJing2006]狼抓兔子(最短路)

    平面图的最小割转化为对偶图的最短路(资料:两极相通——浅析最大最小定理在信息学竞赛中的应用) ,然后DIJKSTRA就OK了. ------------------------------------ ...

  10. HDU2084-数塔

    描述: 在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大是多少? 代码: 简单的动态规划 ...