动态JavaScript滚动无法正常工作

Question

因此，我一直在尝试制作动态滚动动画，该动画可以反复上下滚动，但是一旦鼠标进入网页的主div即可停止，然后在光标离开上述div时重新启动，用户是否已滚动自己，以及内容的数量是否发生变化

但是它所做的就是正确地开始第一个动画，然后放弃在底部停止并拒绝让用户完全滚动。

当我尝试触发停止功能时，它只是给我错误“ TypeError：animate（...）未定义，无法访问其属性0”，我也不知道为什么。

有什么想法吗？

setTimeout(function(){

    if(screen.width >= 1300 && $('#animatediv')[0].scrollHeight > 700){

        var screenview = document.getElementById('animatediv').clientHeight;
        var to = $('#animatediv')[0].scrollHeight;
        var animatetime = ((to - 700) * 800) / 80;
        var used = 0;
        var delay = 2000;
        var userscroll = 0;
        var animatescroll = 0;
        var running = 0;

        $('#main').mouseleave(function() {
            running = 1;
            userscroll = $('#animatediv').scrollTop();
            setTimeout(function(){animate(screenview, to, animatetime, used, delay, userscroll, animatescroll, running)}, delay);
        });


        $('#main').mouseenter(function() {
            running = 0;
            var news = animate(screenview, to, animatetime, used, delay, userscroll, animatescroll, running)
            used = news[0];
            to = news[1];
            $('#animatediv').stop();
            animatescroll = $('#animatediv').scrollTop();
        });

    }

}, 600);




function animate(screenview, to, animatetime, used, delay, userscroll, animatescroll, running){

    to = $('#animatediv')[0].scrollHeight;

    var time = (animatetime - used) + (animatescroll - userscroll);

    if(to != 0){
        animateto = to - screenview;
    }
    else{
        animateto = 0;
    }

    $('#animatediv').animate({ scrollTop: animateto}, time, 'linear');

    setInterval(function(){

        if(running == 0){
            var returns = [used, to]
            return returns;
        }
        if(used == animatetime){
            if(to != 0){
                to = 0;
            }
            else{
                to = $('#animatediv')[0].scrollHeight;
            }
            used = 0;
            setTimeout(function(){animate(screenview, to, animatetime, used, delay, userscroll, animatescroll)}, delay);
        }
        else{
            used++;
        }

    }, 1);

}

Answer 1

有很多错误。所以我做了另外一个。这是Jsfiddle

<resources>  
    <declare-styleable name="AccessibilityOverlay">  
        <attr name="accessible_group" format="string" />  
    </declare-styleable>  
</resources>

   var runnig=true, deriction = "down";
   var time = 3000, lastScrollTop = 0;
   animate($('#animatediv')[0]);
   $('#main').mouseleave(function() {
         removeAndAnimate();
	 });
   $('#main').mouseenter(function() {
        runnig = false;
        lastScrollTop = $('#animatediv')[0].scrollTop;
        if(deriction === "down"){
          deriction = "up";
        }else{
          deriction = "down";
        }
        
        $('#animatediv').stop(true);
        setTimeout(function(){
           $('#animatediv')[0].addEventListener("scroll", userScroll, false);
        }, 100);
        
	 });



async function removeAndAnimate(){
  var resultat = await ($('#animatediv')[0].removeEventListener("scroll", userScroll, false));
  runnig = true;
  animate($('#animatediv')[0]);
}



function userScroll(){
   var st = this.scrollTop; 
   if (st > lastScrollTop){
      deriction = "down";
   } else {
      deriction = "up";
   }
   lastScrollTop = st <= 0 ? 0 : st;
}
 
	function animate(element){
		
		var scrollTop = element.scrollTop;
    var heightToScroll = element.scrollHeight - $(element).height();
		var animateto = 0, delay = 0;
		if(scrollTop != 0){
      if(deriction === "down"){
        animateto = heightToScroll;
        delay = (heightToScroll - scrollTop)*time/heightToScroll;
      }else{
        delay = scrollTop*time/heightToScroll;
      }
		}else{
      animateto = heightToScroll;
      delay = time;
    }

    
    if(deriction === "down"){
      deriction = "up";
    }else{
      deriction = "down"
    }
		
		$('#animatediv').animate({ scrollTop: animateto}, delay, 'linear', function(){
      if(runnig){
        animate(element);
      }
    });
		
	}

*{
	font-size: 62,5%;
	margin: 0;
	padding: 0;
}

body{
	background-color: #F5E7D3;
}

#main{
	width: 90%;
	margin: auto;
	text-align: center;
	background: linear-gradient(to bottom, #FFF1C4 20%, #72982D);
	/* overflow: hidden; */
	height: 350px;
}

#animatediv{
  border: 1px solid black;
	width: 50%;
	float: right;
	height: 300px;
	overflow-y: auto;
	overflow-x: hidden;
}