浏览器对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连接 ...
随机推荐
- Web平台开发流程以及规范
1.js和css的放的位置顺序与加载速度分析 为了让客户先看到效果,必须要先加CSS 如果在先head加载CSS,如果CSS大,会先下载CSS,再渲染HTML标签 如果CSS放在head中,当显示出H ...
- 编译器DIY——词法分析
在上一篇文章中已经介绍了读文件的操作,那么这一篇文章中将会细致解释词法分析. 在源文件里解析出的单词流必须识别为保留字,标识符,常量,操作符和界符五大类 1.显然我们须要列举出全部的保留字,而这里与保 ...
- 飘逸的python - 有的升序有的降序的情况下怎么多条件排序
之前在统计导出各区服玩家消费的时候需要进行升序降序混搭的多条件排序. 需求是这样的.区服从小到大排,如果区服相同,则按消费从大到小排. 实现方法是利用python的sort算法是稳定排序,对数据进行多 ...
- 关于new Function使用以及将json格式字符串转化为json对象方法介绍
一直对Function()一知半解,今日就Function()的使用做一下总结 一.函数实际是功能完整的对象,用Fucntion()直接创建函数. 语法规则: var 函数名 = new Fun ...
- 原生js下拉刷新
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- SDK无法更新
http://jingyan.baidu.com/article/da1091fbd232fe027949d653.html
- SSIS: 使用Lookup 和 Cache transformation 进行数据匹配简单介绍
本文将讲解Cache transformation的使用方式,并且用Lookup transformation进行匹配. 背景 如下图,我们的产品目标表中有些有尺寸信息有些没有.我们需要用Cache组 ...
- Lucence.Net学习+盘古分词
创建索引库 //读取文件,存储到索引库 public string CreateDatebase() { //获取索引库的路径 ...
- 经典union的使用
一个用户下广告位 某一天有收入和支出 有支出不一定有收入 有收入不一定有支出 下例为按用户查询 sanhao 下的信息 支出如下: 收入如下: 按天进行查询,例如查询: 得到结果如下: 使用一 ...
- 二、Python-----用户交互
1.用户交互 Python 3.0的写法 name = input("Please input your name:") Python 2.0的写法 name = raw_inpu ...