一、问题介绍
1、今天在写项目的时候需要用到js控制div移动,于是我就想到了以前写的一个移动的方法,决定复制过来,改一改,在这个项目中使用。
以前的:
function donghua(obj,target,callback){
console.log(target);
//防止多次点击注册多个定时器
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//正负不同,取值不同
var step=(target-obj.offsetLeft)/10;
step=step>0?Math.ceil(step):Math.floor(step);
if(obj.offsetLeft==target){
clearInterval(obj.timer);
callback&&callback();
}
obj.style.left=obj.offsetLeft+step+'px';
},15)
}
但是这次我需要移动的是从下向上,我就把其中的obj.style.left改为obj.style.Bottom,
obj.offsetLeft改为obj.offsetBottom,,可以一跑起来,发现没效果。
我上网查阅才发现没有obj.style.Bottom,obj.offsetBottom,这两个属性。
但是有top
二、问题解决
1.我对代码进行了如下改造,就可以了:
//当前body高度 document.body.scrollHeight
const bodyHit=document.body.scrollHeight
const target = bodyHit-130
const obj = this.firstRef.current
obj.timer=setInterval(function(){
//正负不同,取值不同
var step=(target-obj.offsetTop)/10;
step=step>0?Math.ceil(step):Math.floor(step);
if(obj.offsetTop===target){
clearInterval(obj.timer);
}
obj.style.top=obj.offsetTop+step+'px';
},8)
2.既然有top,那么我们就用top呗,
大家写代码一定要灵活应变。