<!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. [LeetCode] Best Time to Buy and Sell Stock Solution

    Say you have an array for which the ith element is the price of a given stock on day i. If you were ...

  2. iptables 规则预设置为新centos系统

    1,新os iptables预设置脚本

  3. java类的封装、继承、多态

    一.封装(encapsulation) 封装性就是把类(对象)的属性和行为结合成一个独立的相同单位,并尽可能隐蔽类(对象)的内部细节,对外形成一个边界,只保留有限的对外接口使之与外部发生联系.封装的特 ...

  4. request.getParameterValues与request.getParameter的差别

    一. 简单的对照 request.getParameter用的比較多,相对熟悉 request.getParameterValues(String   name)是获得如checkbox类(名字同样, ...

  5. JS中的replace方法

    JavaScript中replace() 方法如果直接用str.replace("-","!") 只会替换第一个匹配的字符. 而str.replace(/\-/ ...

  6. Android应用开发基础篇（5）-----Handler与多线程

    链接地址:http://www.cnblogs.com/lknlfy/archive/2012/02/19/2358155.html 一.概述 Handler这个类主要用来发送和处理消息的.它有多个发 ...

  7. [NewCoder]复杂链表的复制

    看下面一个链表结点的定义: struct ComplexListNode { int val; struct ComplexListNode *next; struct ComplexListNode ...

  8. 实时消息传输协议 RTMP(Real Time Messaging Protocol)

    实时消息传输协议(RTMP)最初是由 Macromedia 为互联网上 Flash player 和服务器之间传输音频.视频以及数据流而开发的一个私有协议.Adobe 收购 Macromedia 购以 ...

  9. 弹出窗口内嵌iframe 框口自适应

    说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...

  10. HTML5 实现图像模糊算法

    做个广告,WEB/PHP/JQ/HTML5/MYSQL/QQ群6848027 项目中需要用到HTML5模糊图像,以前用GDI,GDI+中都有现成的组件来实现,HTML5中如何实现? createIma ...