animate ()가 아닌 사용자 스크롤 만있을 때만 스크롤을 호출합니다.

Question

멋진 애니메이션으로 페이지를 맨 위로 스크롤하여 "Going To Top"을 목적으로 페이지 전체에 몇 가지 링크가 있습니다. 예를 들어 페이지가 스크롤하는 동안 때때로 페이지가 스크롤하는 동안 예를 들어 아래로 스크롤하기를 원하지만 불가능합니다. 화면은 말더듬 만 있지만 상단에 도달 할 때까지 계속 애니메이션됩니다.

사용자가 스크롤을 시도하면 애니메이션을 중지하고 싶습니다. 따라서이 코드를 작성했습니다.

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        $('body').stop();
});
    return false;
})

이 코드는 아미트 ()가 스크롤링으로 계산되므로 스크롤하기 때문에 문제가되므로 스스로를 멈추기 전에 약간만 움직입니다.

옵션으로 키 다운을 시도했지만 마우스 스크롤은 키로 등록되지 않습니다.

내 스크롤 함수를 호출 할 수있는 방법이 있습니까? 사용자 애니메이션 ()이 아닌 스크롤?

Answer 1

애니메이션 값을 설정하기 위해 자신의 코드를 작성하고 변경이 애니메이션에서 나오는 것을 나타내는 플래그를 설정할 수 있습니다.

예 : (테스트되지 않은)

var scrollAnimating = false
jQuery.fx.step.scrollTop = function(E) {
    scrollAnimating = true;
    E.elem.scrollTop = E.now;
    scrollAnimating = false;
};

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);
    $(window).scroll(function () {
        if (!scrollAnimating)
            $('body').stop();
    });
    return false;
})

당신은 똑같은 일을 할 수 있습니다 scrollLeft.

그 설정을 가정하고 있습니다 scrollTop 재진입 전화입니다 scroll 이벤트는 라인 내부에서 발사됩니다 E.elem.scrollTop = E.now. 재진입이 아닌 경우 (일부 브라우저에만있을 수 있음) 이벤트는 이후에 해고됩니다. scrollAnimating 다시 설정됩니다 false. 이 문제를 해결하려면 재설정 할 수 있습니다 scrollAnimating 내부 scroll 이벤트.

Answer 2

나는 같은 문제가 있었지만 jQuery 문서에서 바로 해결책을 찾았습니다. 애니메이션이 완료 될 때 콜백 함수를 설정할 수있는 애니메이션 방법의 속성이 있습니다.

http://api.jquery.com/animate/#animate-properties-duration-easing-complete

코드는 다음과 같습니다.

$('#gototop').click(function() {

    //This will help you to check 
    var animationIsFinished = false;

    $('body').animate({scrollTop:0},3000,"swing",function(){

        //this function is called when animation is completed
        animationIsFinished = true;

    });
    $(window).scroll(function () {
        //Check if animation is completed
        if ( !animationIsFinished ){
            $('body').stop();
        }
    });
    return false;
})

Answer 3

그것을 알아 냈습니다! 인터넷을 둘러 본 후 나는 Document.addEventListener 모질라와 document.onmousewheel 스크롤 이벤트를 잡을 IE와 오페라의 경우.

$('#gototop').click(function() {
    $('body').animate({scrollTop:0},3000);

    if(window.addEventListener) document.addEventListener('DOMMouseScroll', stopScroll, false);
    document.onmousewheel = stopScroll;

    function stopScroll() {$('body').stop()};

    return false;
})