Zurücksetzen der Autoscroll-Intervalle mit Iscroll

Question

Ich versuche eine Seite mit einem Karussell mit iScrolljs zu erstellen. Die Position des Karussells sollte der Position in einem Video folgen. Dies ist für die Frage nicht wirklich relevant, aber ich dachte, ich sollte so viele Informationen wie möglich geben.

Die Autoscrolling funktioniert, aber ich möchte auch den Benutzer die Möglichkeit haben, selbst zu scrollen. Das Problem besteht darin, dass beim Scrollen jetzt jedes Mal, wenn das Intervall aufgerufen wird, das Karussell zur vorherigen Position scrollt. Ich versuche mit Löschintervallen zu arbeiten und sie zurückzusetzen, aber es scheint nicht zu funktionieren. Dies ist, was ich habe:

video.onplay = function(){ 
myScroll = new IScroll('#carWrapper',{ 
       scrollX: true, 
       scrollY: false, 
       momentum: false, 
       click:true, 
       mouseWheel:true, 
       tap: true, 
       keyBindings: true 
      }); 

scroll(); 
    }; 

    function checkMoved(){ 
if(document.getElementById('carWrapper')){ 
     if(!scroller.moved){ 
       var scrollPos = (video.currentTime/video.duration)*4800; 
       myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic); 
     } 
    } 

if(myScroll.moved){ 
    clearInterval(scrollInterval); 
    myScroll.moved = false; 
    setTimeout(scroll(),10000); 
} 
    } 

    function scroll(){ 
scrollInterval = setInterval(checkMoved,5000); 
    } 

Vielen Dank im Voraus!

Answer 1

ich den Code ein wenig geändert und habe es funktioniert.

video.onplay = function(){ 
myScroll = new IScroll('#carWrapper',{ 
       scrollX: true, 
       scrollY: false, 
       momentum: false, 
       click:true, 
       mouseWheel:true, 
       tap: true, 
       keyBindings: true 
      }); 

scrollInterval = setInterval(function(){ 
    if(myScroll.moved){ 
     resetInterval(); 
     myScroll.moved = false; 
    } 
    else if(document.getElementById('carWrapper')){ 
     if(!scroller.moved){ 
       var scrollPos = (video.currentTime/video.duration)*4800; 
       myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic); 
     } 
    } 
},5000); 
    }; 

    function resetInterval(){ 
clearInterval(scrollInterval); 
scrollTimeout = setTimeout(function(){ 
    scrollInterval = setInterval(function(){ 
     if(myScroll.moved){ 
      resetInterval(); 
      myScroll.moved = false; 
     } 
     else if(document.getElementById('carWrapper')){ 
      if(!scroller.moved){ 
       var scrollPos = (video.currentTime/video.duration)*4800; 
       myScroll.scrollTo(-scrollPos,0,1000,IScroll.utils.ease.elastic); 
      } 
     } 
    },5000); 
},10000); 
    } 

Es ist wahrscheinlich nicht der sauberste Code, aber ich bin froh, dass es funktioniert.

Answer 2

Ich denke, der Browser nicht die Funktion scrollInterval checkMoved sieht() Sie haben es zu erklären, global dann weisen Sie in Scroll-Funktion

var scrollInterval; 
video.onplay = function() { 
    myScroll = new IScroll('#carWrapper', { 
     scrollX: true, 
     scrollY: false, 
     momentum: false, 
     click: true, 
     mouseWheel: true, 
     tap: true, 
     keyBindings: true 
    }); 

    scroll(); 
}; 

function checkMoved() { 
    if (document.getElementById('carWrapper')) { 
     if (!scroller.moved) { 
      var scrollPos = (video.currentTime/video.duration) * 4800; 
      myScroll.scrollTo(-scrollPos, 0, 1000, IScroll.utils.ease.elastic); 
     } 
    } 

    if (myScroll.moved) { 
     clearInterval(scrollInterval); 
     myScroll.moved = false; 
     setTimeout(scroll(), 10000); 
    } 
} 

function scroll() { 
    scrollInterval = setInterval(checkMoved, 5000); 
}