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

最新推荐文章于 2023-09-13 14:37:52 发布

YOUAFR

最新推荐文章于 2023-09-13 14:37:52 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/YOUAFR/article/details/78282297

版权

在设计页面时可能经常会用到固定层的位置，这就需要获取一些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>