<!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. 删除input或textarea输入框在移动版显示的阴影（Safari/iPhone）

    移动端浏览网页元素时,自动给input和textarea添加了内部阴影的效果,只需加入样式即可去除 input,textarea{-webkit-appearance: none;} input[ty ...

  2. 面试题19：包含min函数的栈

    CStack.h: #pragma once class CStackElement { public: CStackElement(void){} CStackElement(int data, i ...

  3. Android的selector 背景选择器

    关于listview和button都要改变android原来控件的背景,在网上查找了一些资料不是很全,所以现在总结一下android的selector的用法.首先android的selector是在d ...

  4. js 中日期 转换成时间戳 例如2013-08-30 转换为时间戳

    //时间格式2014-02-02 14:10:00改成时间戳 //此时构造出来的时间是:2013/03/08 00:00:00. //这样得到的是一个数值,表示的是从1970年1月1日0点0分0秒到d ...

  5. HTML+CSS笔记 CSS进阶再续

    CSS的布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上, ...

  6. poj 2653 计算几何

    #include <iostream> #include <cstring> #include <algorithm> #include <cmath> ...

  7. UIWebView的三种加载方式

    一.使用UIWebView 将web content 嵌入到应用上. API提供了三种方法: - (void)loadRequest:(NSURLRequest *)request; - (void) ...

  8. 安装 Rational Rose 启动报错：无法启动此程序，因为计算机中丢失 suite objects.dll

    安装完以后提示找不到 suite objects.dll: 经查找,该 dll 存在: 找不到的原因是,安装程序自动设置在 Path 中的环境变量有误: 把最后的 common 改成 Common: ...

  9. document.createElement在IE和Firefox下的差异

    IE有3种方式都可以创建一个元素: 1 document.createElement("<input type=text>") 2 document.createEle ...

  10. js函数预编译和声明语句被提升问题小结

    <!DOCTYPE html><html><head></head><body><script>//-------------- ...