浏览器对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连接 ...
随机推荐
- 打印NxN的矩阵
找出规律,并打印出一个NxN的矩阵,规律就是从首坐标开始顺时针依次增大: #include<iostream> #include<vector> using namespace ...
- nefu 462 fib组合
nefu 462 fib组合 (斐波那契数列的通项公式以及推倒过程) 分类: 数学2014-05-21 10:27 190人阅读 评论(0) 收藏 举报 题目链接:http://acm.nefu.ed ...
- CodeForces 160D - Distance in Tree 树型DP
题目给了512MB的空间....用dp[k][i]代表以k为起点...往下面走(走直的不打岔)i步能有多少方案....在更新dp[k][i]过程中同时统计答案.. Program: #include& ...
- zoj 2067 White Rectangles
这题解决的算法处理,真的很难想清楚!!尤其是最后的正矩形如何处理.不过终于看懂了 #include<stdio.h> #include<stdlib.h> #include&l ...
- SSIS:捕获修改了的数据
获取修改了的数据一般有三种方式: 1.使用一个datetime列 缺点:是并不是每个表都会有个‘修改日期’字段来让你判断行是否修改过 使用实例可以参考我之前的文章:SSIS: 使用最大ID和最大日期来 ...
- ASP.NET关于Eval的值
ASP.NET邦定数据“<%#Eval("Sex")%>”运用三元运算符: <%#(Eval(") ? "男" : "女& ...
- ExtJs007最常用的查询方法
Ext.onReady(function () { Ext.create('Ext.panel.Panel', { title: '我的面板', width: '100%', height: 400, ...
- HTML+CSS笔记 CSS入门续集
继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代(标签). 语法: p{color:red;} <p> ...
- （Problem 73）Counting fractions in a range
Consider the fraction, n/d, where n and d are positive integers. If nd and HCF(n,d)=1, it is called ...
- MVC-03 控制器（2）
五.ActionResult解说 ActionResult的继承图: 类型 Controller辅助方法 用途帮助 ContentResult Content 回传一个用户自定义的文字属性 Empty ...