Динамическая прокрутка JavaScript не работает, как задумано - PullRequest
Новая
       21

Динамическая прокрутка JavaScript не работает, как задумано

0 голосов
/ 17 октября 2018

Итак, я пытался создать динамическую анимацию прокрутки, которая многократно прокручивается вверх и вниз, но которую можно остановить, как только мышь войдет в основной 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);

}

1 Ответ

0 голосов
/ 19 октября 2018

Есть много ошибок.поэтому я сделал другой.вот это Jsfiddle 

   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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
  <div id='animatediv'>
    grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />grsgfes
    <br />
  </div>
</div>
...