첫 번째 트리거 후 스크롤 이벤트 수신기를 중지하는 방법?

Question

사용자가 처음으로 페이지를 스크롤 할 때 스크롤 이벤트 수신기를 시작한 다음 일정 시간이 지나면 실행을 중지하고 사용자가 정상적으로 스크롤 할 수있게하려고합니다. 여기

내가 현재 그 작업 있어요 방법은 다음과 같습니다

var scrollcount = 0 

// Scroll event listener 

    window.addEventListener("scroll", function() { 
    setTimeout(function() { 
    scrollcount ++ 
    if (scrollcount < 40) { 
     window.scrollTo(0, 0); 
    } 
}, 1200); 
    }); 

scrollcount 변수 단위로 스크롤과 함께, 40는 내 노트북의 트랙 패드에서 하나의 스크롤에 대한 차지하는 관한 것입니다. 카운터가 40보다 작 으면 사용자가 스크롤 휠을 놓으면 페이지가 페이지 상단으로 다시 스크롤됩니다 (40 이상이면 스크롤 휠이 이동하지 않습니다).

나는 이것에 관해서 정말로 나쁜 방법임을 깨닫습니다. 그래서 누군가가 그것을 할 수있는 더 믿을만한 방법을 가지고 있는지 궁금합니다. removeEventListener 메서드를 사용하여 setTimeout이 지연을 완료하면 이벤트 리스너를 끄려 고했지만 그 대상을 윈도우로 가져올 수 없습니다. 스크롤 이벤트 수신기가 컨테이너 div 및 창, 할당 된 경우 removeEventListener 작동하는 것이라고 생각하지만 때 스크롤 이벤트 수신기 첫 번째 위치에서 작동하지 않았다.

필자는 jQuery 또는 다른 라이브러리를 피하고 싶었지만이 시점에서 안정적으로 작동하게하려면 아무 것도 사용하지 않을 것입니다.

Answer 1

이것은 사용자가 스크롤을 시작할 때부터 2 초 후, 페이지 상단으로 이동합니다 :

/* Create a one-time event */ 
function onetime(node, type, callback) { 
    node.addEventListener(type, function(e) { 
     e.target.removeEventListener(e.type, arguments.callee); 
     return callback(e); 
    }); 
} 

onetime(document, 'scroll', function(e) { 
    setTimeout(function(){ window.scrollTo(0, 0); }, 2000); 
}); 

당신이 jQuery를 사용하는 경우 see it live here

, 당신은 jQuery의 one 기능을 사용하고에 코드를 단순화 할 수 있습니다 :

$(document).one('scroll', function(e) { 
    setTimeout(function(){ window.scrollTo(0, 0); }, 2000); 
}); 

미리 정의 된 시간 동안 대기하지 않고 일부 애니메이션을 마친 후에 페이지의 맨 위로 이동하려면 애니메이션 작업을 완료 한 후 window.scrollTo(0, 0);으로 전화해야합니다. jQuery의 effect functions을 사용하여 애니메이트하는 경우 콜백 함수를 마지막 인수로 전달할 수 있으며 애니메이션이 완료되면 호출됩니다.

$(document).one('scroll', function(e) { 
    $('pre').animate(
    {fontSize: "106px"}, 
    2000, 
    function(){ window.scrollTo(0, 0); } 
); 
}); 

see it live here

Answer 2

당신은 그것을 제거하기 위해 리스너에 이름을 지정해야합니다

var scrollcount = 0 

// Scroll event listener 

function scrollListener() { 
    setTimeout(function() { 
    scrollcount ++ 
    if (scrollcount < 40) { 
     window.scrollTo(0, 0); 
     window.removeEventListener("scroll", scrollListener); 
    } 
    }, 1200); 
}); 
window.addEventListener("scroll", scrollListener);