浏览器对body节点scrollTop解析的差异

最新推荐文章于 2021-08-04 18:38:25 发布

dayanwu2842

最新推荐文章于 2021-08-04 18:38:25 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/stephenykk/p/3670890.html

版权

<!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获得

转载于:https://www.cnblogs.com/stephenykk/p/3670890.html

dayanwu2842

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器对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{backgro...
复制链接

扫一扫