本文主要包含window.onscroll兼容,js,右侧悬浮窗等相关知识,Q_004的博客希望在学习及工作中可以帮助到您
为窗口添加滚动条事件其实很简单 就是window.onscroll=function()
但是在获取滚动条距离的时候要做到兼容
document.documentElement.scrollTop----->获取当前页面滚动条的纵坐标位置 但是chrome不兼容 对应的是HTML标签
而document.body.scrollTop对应的是BODY标签 在w3c下 它的值恒为0；
所以，对于有doctype声明的页面里使用document.documentElement.scrollTop来获取
对于没有doctype声明的页面可以使用document.body.scrollTop来获取
为了兼容可以这样表示
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop
下面以一个右侧悬浮框的代码为例
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>右侧悬浮框</title>
<style type="text/css">
#div1{
width: 100px;
height: 150px;
background-color: red;
position: absolute;
right: 0;
bottom: 0;
}
</style>
<script type="text/javascript">
window.onscroll=function()
{
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //做兼容
startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
//(可视区域高度-div的高度)/2+滚动条的高度
}
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1')
clearInterval(timer);
timer=setInterval(function(){
var speed=(iTarget-oDiv.offsetTop)/8; //速度可变
speed=speed>0?Math.ceil(speed):Math.floor(speed); //速度可能为小数，取整
if(oDiv.offsetTop==iTarget){
clearInterval(timer);
}
else
{
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
},30)
}
</script>
</head>
<body style="height:2000px;">
<div id="div1">
</div>
</body>
</html>