首先是代码
<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';
就是不要加自身,不然每次这玩意都会归零。。。原理我暂时也不知道,先摁记吧。