scrollTop이 스크롤 이벤트를 호출하지 못하도록합니다.

Question

사용자가 마우스 휠을 스크롤하거나 ↓을 누르면 웹 페이지가 창 높이만큼 아래로 스크롤됩니다.

나는 다음과 같은 코드로 결국했습니다

var newScrollTop, 
    oldScrollTop = $(window).scrollTop(), 
    preventScroll = false; 
$(window).scroll(function() { 
    if (!preventScroll) { 
     preventScroll = true; 
     newScrollTop = $(this).scrollTop(); 
     if (newScrollTop > oldScrollTop) { 
      $(this).scrollTop(oldScrollTop + $(window).height()); 
     } 
     else { 
      $(this).scrollTop(oldScrollTop - $(window).height()); 
     } 
     oldScrollTop = newScrollTop; 
     preventScroll = false; 
    } 
}); 

그러나 내가 예상대로이 작동하지 않습니다 : 스크롤 이벤트 페이지에서 매우 가장자리 (상단이나 하단)에 스크롤됩니다. 내가 뭘 놓치고 있니?

Answer 1

기본 브라우저 스크롤 기능을 재정의하는 쉬운 방법은 없습니다. 여기 당신이 원하는 일을 하나의 방법입니다,하지만 브랜든 아론의 jquery-mousewheel plugin 마우스 스크롤 휠을 관리 할 필요

$(function() { 
    // Ugly hack to disable browser scrolling (downside: hides scrollbar!!!) 
    $('html').css('overflow', 'hidden'); 

    // Get viewport height by which to scroll (up or down) 
    var viewportHeight = $(window).height(); 

    // Recache viewport height on browser resize 
    $(window).on('resize', function() { 
     viewportHeight = $(window).height(); 
    }); 

    // Scroll on mousewheel 
    $('html').on('mousewheel', function(event, delta, deltaX, deltaY) { 
     // scroll down 
     if (deltaY < 0) 
      window.scrollBy(0, viewportHeight); 
     // scroll up 
     else 
      window.scrollBy(0, -viewportHeight); 
    }); 

    // Disable document keypress event 
    // which would scroll the content even with "overlow: hidden" 
    $(document).on('keypress', function(){ 
     return false; 
    }); 

    // Scroll on arrow up/down keys 
    $(document).on('keydown', function(event){ 
     // arrow down key 
     if (event.which == 40) 
      window.scrollBy(0, viewportHeight); 
     // arrow up key 
     if (event.which == 38) 
      window.scrollBy(0, -viewportHeight); 
    }); 
}); 

이 여기에 코드를 시연하는 fiddle입니다. 내 솔루션에 하나의 추악한 단점이 있다는 것을 제외하고는 모두 잘 작동합니다. $('html').css('overflow', 'hidden');이 브라우저 스크롤바를 제거합니다.

Answer 2

scrollTop()은 윈도우 스크롤 이벤트 자체에서 스크롤 이벤트를 트리거하는 문제입니다.

기본적으로 첫 번째 스크롤 이벤트가 트리거되면 다른 하나는 scrollTop()에 의해 트리거되고 preventScroll 변수는 여전히 false로 설정되지 않으므로 무한 루프로 실행됩니다.

var newScrollTop, 
    oldScrollTop = $(window).scrollTop(), 
    preventScroll = false; 

$(window).scroll(function() { 
    if (!preventScroll) { 
     preventScroll = true; 
     newScrollTop = $(this).scrollTop(); 
     if (newScrollTop > oldScrollTop) { 
      $(this).scrollTop(oldScrollTop + $(window).height()); 
     } 
     else { 
      $(this).scrollTop(oldScrollTop - $(window).height()); 
     } 
     oldScrollTop = newScrollTop; 

     setTimeout(function(){ preventScroll = false; }, 0); 
    } 
}); 

우리는 약간의 "지연"를 추가 우리가 false에 preventScroll를 설정하기 전에 :

은 당신이 그렇게처럼의 setTimeout 함수 내에서 false에 preventScroll 변수를 설정해야 할 것입니다 귀하의 코드가 작동을합니다. 이 방법으로 scrollTop() preventScroll 변수를 호출해도 여전히 true로 설정됩니다!

는 다음 작업 바이올린의 : http://jsfiddle.net/J6Fcm/는