浏览器对body节点scrollTop解析的差异
<!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解析的差异的更多相关文章
- Spring源码情操陶冶-自定义节点的解析
本文承接前文Spring源码情操陶冶-DefaultBeanDefinitionDocumentReader#parseBeanDefinitions,特开辟出一块新地来啃啃这块有意思的骨头 自定义节 ...
- Mybatis源码解析，一步一步从浅入深（五）：mapper节点的解析
在上一篇文章Mybatis源码解析,一步一步从浅入深(四):将configuration.xml的解析到Configuration对象实例中我们谈到了properties,settings,envir ...
- 网站怎么布局能解决不同浏览器对CSS解析的差异,使用css reset
很多地方都提到过CSS Reset这个概念,而且细心的朋友会发现,许多大网站的CSS文件中也含有CSS Reset内容. CSS Reset是什么? 在HTML标签在浏览器里有默认的样式,例如 p 标 ...
- 浏览器-05 HTML和CSS解析1
一个浏览器内核几个主要部分,HTML/CSS解析器,网络处理,JavaScript引擎,2D/3D图形引擎,多媒体支持等; HTML 解析和 DOM 网页基本结构 一个网页(Page),每个Page都 ...
- 浏览器-06 HTML和CSS解析2
选择器 其实现由CSSSelector类来完成: CSSSelector的作用是储存从解析器生成的结果信息; 这里匹配指的是当需要为每个DOM中的节点计算样式时,WebKit需要根据当前的节点信息来从 ...
- 浏览器获取正确的scrollTop值
window.pageYOffset 被所有浏览器支持除了 IE 6, IE 7, IE 8, 不关doctype的事, 注IE9 开始支持此属性. window.scrollY 被Firefox, ...
- u-boot-2018.09 DTS上 I2C节点的解析 （转）
这篇理下uboot上I2C总线挂载设备的整个流程. 其他总线(如SPI等)应是类同的思路. uboot 中,以max8997挂载到s3c24xx i2c总线为例, dts里面的写法如下 aliases ...
- kubernetes多节点部署解析
注:以下操作均基于centos7系统. 安装ansible ansilbe可以通过yum或者pip安装,由于kubernetes-ansible用到了密码,故而还需要安装sshpass: pip in ...
- chrome浏览器Timing内各字段解析
Queueing请求文件顺序的的排序 Stalled是浏览器得到要发出这个请求的指令到请求可以发出的等待时间,一般是代理协商.以及等待可复用的TCP连接释放的时间,不包括DNS查询.建立TCP连接 ...
随机推荐
- Uber到底挣钱不挣钱，听听司机怎么说
“根本不挣钱.”Joel开着他崭新的丰田凯美瑞混合动力车,在硅谷早晨的濛濛细雨中,不无幽怨地说.Joel是一名Uber司机,从坐上他车的那一刻起,他的抱怨便一直没停过:“过去日子还挺好过,一个月靠开U ...
- 使用资源监控工具 glances
http://www.ibm.com/developerworks/cn/linux/1304_caoyq_glances/ glances 可以为 Unix 和 Linux 性能专家提供监视和分析性 ...
- 通达OA 小飞鱼开发培训第四讲 工作流介绍（图文）
本次课程主要解说了OA工作流相关内容,有些涉及到工作流的程序开发假设对工作流不熟悉也是有非常大难度,因此在这里进行了内容补充. 1.工作流介绍
- SQLServer 2008 ：error 40 出现连接错误
在与SQLServer建立连接时出现与网络相关的或特定与实例的错误.未找到或无法访问服务器.请验证实例名称是否正确并且SQL SERVER已配置允许远程链接.(provide:命名管道提供程序,e ...
- 线性规划问题的matlab求解
函数:[x, fval] = linprog(f, A, b, Aeq, Beq, LB, UB) 返回的x:是一个向量——在取得目标函数最小时各个xi的取值: 返回的fval:目标函数的最小值: 参 ...
- iOS：原生二维码扫描
做iOS的二维码扫描,有两个第三方库可以选择,ZBar和ZXing.今天要介绍的是iOS7.0后AVFoundation框架提供的原生二维码扫描. 首先需要添加AVFoundation.framewo ...
- Android百度地图的简单实现
2015-06-13 最近学习了百度地图API的简单开发,现记录如下:(持续更新中) 百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API.Web服务AP ...
- JavaEE学习之类加载器
类装载子系统 在JAVA虚拟机中,负责查找并装载类型的那部分被称为类装载子系统. JAVA虚拟机有两种类装载器:启动类装载器和用户自定义类装载器.前者是JAVA虚拟机实现的一部分,后者则是Java程序 ...
- shopnc b2b2c如何开启伪静态？？
shopnc b2b2c开启伪静态的方法 一. windows环境下 1.先下载isapi rewrite插件,安装,然后我们把根目录下面的htaccess.txt那么修改成.htaccess即可. ...
- bzoj 1295: [SCOI2009]最长距离
题目链接 1295: [SCOI2009]最长距离 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1165 Solved: 619[Submit][ ...