【兼容性解决】页面滚动距离document.documentElement.scrollTop兼容性问题

最新推荐文章于 2023-12-06 17:15:46 发布

xyphf_和派孔明

最新推荐文章于 2023-12-06 17:15:46 发布

阅读量5.8k

点赞数 2

分类专栏： DOM&BOM操作兼容性解决文章标签： javascript BOM 兼容性问题

本文链接：https://blog.csdn.net/xyphf/article/details/51019090

版权

DOM&BOM操作同时被 2 个专栏收录

64 篇文章 0 订阅

订阅专栏

兼容性解决

16 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="前端工程师——和派孔明" />
<meta name="copyright" content="前端工程师——和派孔明" />
<title>页面滚动距离兼容性解决</title>
<style>
*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}
body{height:2000px;}
#div1{width:100px;height:101px;background:red; position:fixed;right:0;bottom:0;}
</style>
<script>

if(window.navigator.userAgent.toLowerCase().indexOf('msie 6') != -1){
//ie6
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
oDiv.style.position='absolute';

window.οnscrοll=window.οnresize=function(){

//document.body.scrollTop =>chrome
//document.documentElement.scrollTop =>IE 火狐

var scrTop=document.documentElement.scrollTop || document.body.scrollTop;
var clientH=document.documentElement.clientHeight;
var divH=oDiv.offsetHeight;

oDiv.style.top=scrTop+clientH-divH+'px';
};
};
}
</script>
</head>

<body>

<div id="div1"></div>

</body>
</html>