2014-01-05 3 views
1

사용자 정의 슬라이더가 있습니다. 그리고 나는 그런 일을하고 싶다. 사용자가 아래로 스크롤하면 다음 슬라이드로 애니메이션이 움직여야하며,이 애니메이션 중에는 스크롤 할 수 없어야합니다. 그러나 나는 문제가있다. 스크롤 이벤트가 여러 번 해고되고, 하나의 애니메이션이 완료 한 후, 두 번째는 시작되고스크롤 이벤트시 scrollTop 애니메이션

여기

내 코드 샘플은

$(window).scroll(function(e){ 
    if($scrolling){ 
    e.preventDefault(); 
    e.stopPropagation(); 
    } 
}) 

$(window).on('mousewheel', function(event){ 
    $scrolling = true 
    $('html, body').animate({scrollTop: 'my position here' }, {done: function(){ $scrolling = false; } }, 1000) 
}); 

내가 잘못하고있는 중이 야되는 등 무엇? 미리 감사드립니다! 당신이 전체 페이지 높이를 스크롤 할 경우 당신은 혼자 mousewheel 이벤트에서 모든 것을 제어 할 수 있습니다

+0

, 당신이 사용할 수있는 [한 페이지 스크롤] (http://github.com/peachananr/onepage-scroll) 또는 [FullPage.js] (http://alvarotrigo.com/fullPage/). 그렇지 않으면'.animate'와'.stop'을 사용하고 스크롤 할 거리의 설정 값을 더하거나 뺍니다 –

답변

0

..

var $scrolling = false; 
$(window).on('mousewheel', function(event){ 
    if (!$scrolling){ 
    $scrolling = true; 
    $('html, body').animate({scrollTop: 'my position here' }, {done: function(){ $scrolling = false; } }, 1000); 
    } 
}); 
관련 문제