2017-05-09 19 views
0

iScrolljs를 사용하여 캐 러셀이있는 페이지를 작성하려고합니다. 회전식 캐 러셀의 위치는 동영상에서의 위치를 ​​따라야합니다. 이것은 질문과 관련이 없지만 최대한 많은 정보를 제공해야한다고 생각했습니다.Iscroll을 사용하여 자동 스크롤 간격 재설정하기

자동 스크롤이 작동하지만 사용자가 직접 스크롤 할 수도 있습니다. 문제는 간격을 호출 할 때마다 지금 스크롤하면 회전 목마가 이전 위치로 스크롤된다는 것입니다. 간격을 지우고 다시 설정하려고하지만 작동하지 않는 것 같습니다. 이것이 내가 가진 것입니다 :

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); 
    } 

미리 감사드립니다!

답변

1

스크롤 기능에 할당해야합니다.

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); 
    } 

아마도 가장 깨끗한 코드는 아니지만 잘 작동합니다.

1

내가 브라우저가 scrollInterval 기능 checkMoved 표시되지 않는 생각() 그런 다음 전 세계적으로 선언 내가 코드를 조금 변경하고 작업을 얻었다

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); 
}