拖动滚动条实现div跟随效果代码实例
分类：实例代码
在线客服系统大家都比较熟悉，一般会在网页的侧栏显示，并且，当拖动滚动条的时候，客服系统能够跟随滚动，并且一般会带有缓冲效果，下面就通过代码实例，详细介绍一下如何实现此特效。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#div1 {
width:50px;
height:200px;
background:#0000FF;
position:absolute;
right:0;
bottom:50px;
}
</style>
<script type="text/javascript">
window.onscroll=function()
{
var oDiv=document.getElementById('div1');
var DivScroll=document.documentElement.scrollTop || document.body.scrollTop;
move(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+DivScroll));
};
var timer=null;
function move(end) {
clearInterval(timer);
timer=setInterval(function(){
var oDiv=document.getElementById('div1');
var speed=(end-oDiv.offsetTop)/5;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetTop == end) {
clearInterval(timer);
}
else {
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
}, 30);
}
</script>
</head>
<body style="height:1000px;">
<div id="div1"> </div>
</body>
</html>
以上代码实现了我们的要求，当拖动滚动条的时候，div块能够跟随滚动。
拖动滚动条实现div跟随效果代码实例，这样的场景在实际项目中还是用的比较多的，关于拖动滚动条实现div跟随效果代码实例就介绍到这了。
拖动滚动条实现div跟随效果代码实例属于前端实例代码，有关更多实例代码大家可以查看。