Javascript智能社教程中关于scroll的右侧浮动框

最新推荐文章于 2021-05-31 05:09:07 发布

三日之别

最新推荐文章于 2021-05-31 05:09:07 发布

阅读量870

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u012370173/article/details/50821183

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

无标题文档

#div1{width:100px; height:150px; background:red; position:absolute;
right:0;bottom:0;}

``` window.οnscrοll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px'; startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop); }; ------------------- ```解释：为什么oDiv.style.top等于那一长串：第一部分document.documentElement.clientHeight代表可见区域高度，大概就是浏览器显示网页的那个高度，减掉Div的高度，给div留出空间，再加上scrollTop，scrollTop是指被隐藏在可见区域的滚动条的高度，这样加上去之后，不管滚动多少，隐藏的部分都会被加入到oDiv.style.top，如此便能固定在右下角的位置。我是小白，想了好一会才把这个想明白。 var timer=null; function startMove(iTarget){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var speed=(iTarget-oDiv.offsetTop)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetTop==iTarget){ clearInterval(timer); }else { oDiv.style.top=oDiv.offsetTop+speed+'px'; } }, 30); }