【JSP笔记】嵌套div的页面滚动

最新推荐文章于 2024-07-24 11:09:48 发布

我来臊皮啦

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量546

点赞数 1

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/JOY_TIGER/article/details/125266317

版权

首先是代码

<style>
    *{
        margin:0;
        padding: 0;
    }
    .outside{
        height: 400px;
        width: 400px;
        background-color: yellow;
    }
    .inside{
        position:relative;
        height: 50px;
        width: 50px;
        left: 0px;
        top:0px;
        background-color: red;
    }
</style>
<body>
<button id="start" >开始</button>
<div class="outside" id="outside" >
    <div class="inside" id="inside"></div>
</div>
</body>
<script>

var outside=document.getElementById('outside');
    var inside=document.getElementById('inside');
    var start=document.getElementById('start');
    var i=0,progress=null;
    start.onclick= function (){
       progress=setInterval(function () {
        if(i<2){
                i=i+1;
                left1=inside.offsetLeft;
                console.log(left1);
                left1=left1+50;
                console.log(left1);
                inside.style.left=left1+'px';
                console.log(inside.style.left);
         }  
         else{
            clearInterval(progress);
         }
       }, 30);
    }
</script>

首先要注意的是嵌套div要滚动的话滚动的那个div要设置一个相对位置relative，外套的div倒是无所谓，否则其不会滚动，这个地方我D了好久BUG，因为代码逻辑没问题一度以为是offset已经不支持改变了。。
第二个是要注意在改变style.left的值的时候不要加下面的东西
inside.style.left=inside.style.left+left1+'px';
就是不要加自身，不然每次这玩意都会归零。。。原理我暂时也不知道，先摁记吧。