스크롤 애니메이션을 수행 할 때 스크롤을 사용하지 않음

Question

사용자가 마우스 휠을 위 또는 아래로 움직일 때 스크롤 애니메이션을 만들려고하고 있습니다. 키워드 화살표를 누르거나 옆에있는 스크롤 막대를 움직입니다.

매우 유사한 것으로 나타났습니다. on this site입니다. jQuery 플러그인을 찾지 못해서 스스로 복제하려고하고 있는데 스크롤 동작에 문제가 있습니다.

스크롤하는 애니메이션이 실행 중일 때 마우스 휠로 계속 스크롤 할 수 있으며 잠시 위아래로 이동하는 모습이 보이지 않게됩니다. 문제는 스크롤이 해제하고 나는 그들이 위로 스크롤 아래되었는지 확인하기 전에되지 않는 것입니다, 사이트가 이미 비트를 스크롤하고있다

http://jsfiddle.net/k4rsN/1/ (운동 :

여기 당신이 그것을 확인할 수있는 내 바이올린의 휠 또는 키워드). 그래서 나는 그것을 해결하는 방법은 스크롤 효과를 비활성화하고 사용자가 스크롤을 결정할 때 무엇을 해야할지 결정하는 것이라고 믿습니다.

나는 this 또는 this과 같은 게시물을 살펴 봤지만 문제가 해결되지 않았습니다.

var lastScrollTop = 0; 
var isMoving = false; 

$(window).scroll(function() { 
    var currentScroll = $(window).scrollTop(); 

    //scrolling down? 
    if (currentScroll > lastScrollTop && !isMoving) { 
     var value = '#link2'; 
    } 
    //scrolling up? 
    else if (!isMoving) { 
     var value = '#link1'; 
    } 

    lastScrollTop = currentScroll; 

    //animation 
    if (value && !isMoving) { //if theres any # 
     isMoving = true; 

     dest = $(value).offset(); 

     $('html, body').animate({ 
      scrollTop: dtop 
     }, 1200, function() { 

      //setting the flag to avoid checking the scrolling when performing the animation 
      isMoving = false; 
     }); 
    } 
}); 

감사 :

이 당신이 the fiddle에서 볼 수 있듯이 지금까지 한 일이다.

Answer 1

함수의 시작 부분에서 일부 CSS 속성을 적용하여 스크롤 할 수 없게 만들 수 있습니다. 그런 다음 애니메이션이 끝나면 다시 정상으로 되돌립니다. 예를 들어 :

$('html, body').css({ 
    'overflow': 'hidden', 
    'height': '100%' 
}) 

그런 다음 애니메이션의 시작 부분에서

,에서 다음 종료

$('html, body').css({ 
    'overflow': 'auto', 
    'height': 'auto' 
}) 

이 사실상이 대답과 같은 것입니다 : https://stackoverflow.com/a/17293689/2247151