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

来源：互联网发布：名片设计软件下载编辑：程序博客网时间：2024/06/06 03:15

<!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.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.style.position='absolute';

window.onscroll=window.onresize=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>

1 0