<!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. proguard混淆jar文件

    Proguard是个优秀的java混淆工具,使用示例如下,一个java工程对外接口代码如下(无需混淆) package com.ciaos.open; import com.ciaos.inner.I ...

  2. 使用ssh无密码登录

    使用ssh无密码登录 ssh 是一个专为远程登录会话和其他网络服务提供安全性的协议.默认状态下ssh链接是需要密码认证的,可以通过添加系统认证(即公钥-私钥)的修改,修改后系统间切换可以避免密码输入和 ...

  3. entity framework 中一些常用的函数 转自http://www.cnblogs.com/williamzhu/

    一般查询 var Courses = db.Courses.Where(c => c.Title == "Physics").OrderBy(c => c.Title) ...

  4. [MSSQL]从SQL语句的角度 提高数据库的访问性能

    1.什么是执行计划?执行计划是依赖于什么信息. 2. 统一SQL语句的写法减少解析开销 3. 减少SQL语句的嵌套 4. 使用“临时表”暂存中间结果 5. OLTP系统SQL语句必须采用绑定变量 6. ...

  5. Problem D Ananagrams（map的使用）

    题目链接:Problem D 题意:输入一些单词,找出所有满足如下条件的单词:该单词不能通过字母重排,得到输入文本中的另一个单词.在判断是否满足条件时,字母不区分大小写. 但是输出时应保留原始大小写, ...

  6. UVa 1658 Admiral(最小费用最大流)

    拆点费用流 --------------------------------------------------------------------- #include<cstdio> # ...

  7. [cocos2d-x] 让精灵响应触摸 并把方向旋转到相对应的角度

    在cocos2d-x里面  想要把一个精灵从原位置移动到用户所触摸到的点 , 并且把精灵的方向旋转相对应的弧度,可以参考一下我的做法 我这里的精灵是用一条鱼, 用户触摸后鱼就移动到所触摸的点, 并且移 ...

  8. [转]使用ping钥匙临时开启SSH:22端口，实现远程安全SSH登录管理就这么简单

    原文链接:使用ping钥匙临时开启SSH:22端口,实现远程安全SSH登录管理就这么简单 这个留待后面玩一下,还是有安全隐患,非核心业务 临时用一下可以. 设置防火墙策略时,关于SSH:22访问权限, ...

  9. 整理网站优化（SEO）的方案

    首先,我们来确定一下seo方案的定义是什么,所谓seo方案是指针对于某个网站,在完成了解熟悉的情况下,结合自身的一套seo优化方法来制定完成符合这个网站seo推广思路和策略.接下来就了解一下新手seo ...

  10. Android Studio 新建项目的R文件丢失的解决方法

    最近Android Studio炒的比较热,于是笔者决定赶赶时髦,从Eclipse转到了Android Studio.不幸的是,用Android Studio创建项目的时候就遇到了一个比较尖锐的问题— ...