응답 메뉴 아래에서 배경 스크롤을 제거하는 방법

Question

간단한 반응 형 메뉴로 작업 중입니다. 메뉴가 커지고 아래로 스크롤하면 모든 페이지를 스크롤하여 계속 페이지를 표시합니다. 그것을 제거 할 수 있습니까?

this 링크에서 테스트 할 수 있습니다.

휴대 전화로 열면 메뉴가 맨 아래로 스크롤되고 그 다음에 몸이있는 배경을 계속해서 스크롤링하므로 중지하려고합니다.

감사합니다.

Answer 1

이 플러그인을 확인해야합니다.

https://github.com/jquery/jquery-mousewheel

그것은 대상 요소에서 마우스 휠 이벤트를 방지 할 수 있습니다.

$(function() { 

    $("#element").mousewheel(function(event, delta) { 
     event.preventDefault(); 
    }); 

}); 

Answer 2

javascript로 본문 또는 html 스크롤을 막아야합니다. 확인이 - CSS를 .disableScroll에서>copied from this link

// lock scroll position, but retain settings for later 
    var scrollPosition = [ 
    self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft, 
    self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop 
    ]; 
    var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that 
    html.data('scroll-position', scrollPosition); 
    html.data('previous-overflow', html.css('overflow')); 
    html.css('overflow', 'hidden'); 
    window.scrollTo(scrollPosition[0], scrollPosition[1]); 


    // un-lock scroll position 
    var html = jQuery('html'); 
    var scrollPosition = html.data('scroll-position'); 
    html.css('overflow', html.data('previous-overflow')); 
    window.scrollTo(scrollPosition[0], scrollPosition[1]) 

Answer 3

메이크업 클래스 disableScroll {오버 플로우 : 숨겨진}

때 신체 요소에 클래스를 'disableScroll'추가 '# 메뉴 - 토글 래퍼'에 사용자가 클릭 , 배경 스크롤을 비활성화 한 다음 사용자가 탐색 링크를 클릭하거나 '# menu-toggle-wrapper'를 클릭하여 페이지 스크롤을 활성화하면 body 요소에서 'disableScroll'클래스를 제거합니다.