<!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. ollicle.com: Biggerlink – jQuery plugin

    ollicle.com: Biggerlink – jQuery plugin Biggerlink – jQuery plugin Purpose Demo Updated for jQuery 1 ...

  2. setImageResource与setImageBitmap的区别

    同样的布局文件,小分辨率手机: 1.使用setImageBitmap设置时,出现如下现象:  2.使用setImageResource时,图片显示正常 原因: setImageResource(id) ...

  3. NGUI使用教程(1) 安装NGUI插件

    前言 鉴于当前游戏开发的大势,Unity3d的发展势头超乎我的预期,作为一个Flash开发人员,也是为Flash在游戏开发尤其是手游开发中的地位感到担忧....所以 近期一段时间都在自己学习unity ...

  4. ADO.NET详解----核心对象的使用

    一.Connection对象 指定某个具体数据源以及提供登陆方式及用户名与密码. Connection对象的主要成员: 1.ConnectionString属性:连接字符串,指定要操作的数据库以及登录 ...

  5. objective-C学习笔记（三）数据成员：属性与实例变量

    类型成员 Type Member 结构体 struct 的成员很简单,只有变量. 类的成员就很多了: 数据成员 data member 描述对象(本讲重点) · 实例变量  instance vari ...

  6. js中使用控件名和数组下标方式获取控件的值时失败

    在做界面展示时涉及到表单行项目的增加和删除时,我们一帮都使用js的脚本实现表单行的增加和删除,那么在进行表单的提交的时我们会再页面上进行提交数据的初步校验,进行数据的初步校验时,就要动态获取控件的值. ...

  7. C++ STL中map存储方式——SAP电面（4）

    map存储方式  一般是平衡二叉树 红黑树

  8. 如何隐藏DLL中，导出函数的名称？(转)

    如何隐藏DLL中,导出函数的名称?(转)   一.引言 很多时候,我们写了一个Dll,不希望别人通过DLL查看工具,看到我们的导出函数名称.可以通过以下步骤实现: 1. 在def函数中做如下定义: L ...

  9. iframe 自适应高度、宽度

    示例: <iframe id="zyms" frameborder="0" scrolling="yes" style="w ...

  10. @Transactional失效的问题

    spring事物配置一般没有问题, 优先检查mysql的引擎是否是innodb, 是的话检查包的扫描是否有问题. 我就是因为包的扫描导致@Transactional失效. 具体情况如下, 在sprin ...