新手救助 这个JS拉倒最右边后始终回回弹到开始无法解决的bug

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.dabox{
width:300px;
overflow: hidden;
}
.col{
width: 650px;
cursor: move;
border: 1px solid black;
}
p.examle{
width:200px;
column-width: 100px;
height: 200px;
margin-bottom: 0px;

}
</style>
</head>
<body>
<div class="dabox">
<div class="col">
<p class="examle">这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内
容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是内容这是内容这是内容这是内容容这是内容这是</p>
</div>
</div>
<script type="text/javascript">
    var col=document.querySelector(".col");
    var box=document.querySelector(".dabox");
    
        var key=0;
        var disX;
    var params={
     currentX:0,
     preX:0,
     odX:0,
     flag: false,
    }
    var getCss=function(o,key){
     return o.currentStyle?o.currentStyle[key]:document.defaultView.getComputedStyle(o,false)[key];
    };
    col.onmousedown=function(event){
     params.flag = true;
    
     if(!event){
     event=window.event;
     }
     var e=event;
     col.onselectstart=function(){
     return false;
     }
     if(params.odX!=0&&key==1){
        col.style.transform="translateX("+params.odX+"px)";
     }
        params.currentX=e.clientX;
    
    };
    document.onmouseup=function(event){
     var e = event ? event: window.event;
     params.flag=false;
     key=1;
                params.odX=disX;
    };
    document.onmousemove=function(event){
     var e = event ? event: window.event;
     if(params.flag){
     var nowX=e.clientX;
     disX =nowX - params.currentX;
     console.log(box.scrollWidth);
     if(disX>0&&box.scrollWidth>300){col.style.transform="translateX("+disX+"px)";}
                    if(box.scrollWidth==300&&disX<0){
                     disX=-352;
                     col.style.transform="translateX("+disX+"px)";
                    
                    }else if(box.scrollWidth>652&&disX>0){
                     disX=0;                    
                     col.style.transform="translateX("+disX+"px)";
                    }else{
                     if(params.odX!=0&&key==1){
                    
     disX=disX+params.odX;
          }
         col.style.transform="translateX("+disX+"px)";
                    }
     if(event.preventDefault){
     event.preventDefault();
     }
     return false;
     }
    }
</script>
</body>
</html>