您的位置：首页 > 运维架构

解决scrollTop兼容问题 document.documentElement.scrollTop || document.body.scrollTop

2017-10-19 11:05 567 查看
在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代document.body,可以这样写
例：var top = document.documentElement.scrollTop || document.body.scrollTop

chrome居然不认识document.documentElement.scrollTop！！！

<style type="text/css">
*{
padding: 0;margin: 0;
}
body{
height: 3500px;
}
#box{
width: 100px;
height: 100px;
background: pink;
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
window.onscroll = function(){
var oBox = document.getElementById('box');

//documentElement 属性可返回文档的根节点。
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + scroll + 'px';
document.title = oBox.offsetTop;
}
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航