푸시 사이드 메뉴로 신체 스크롤 방지 방법

푸시 사이드 메뉴로 신체 스크롤 방지 방법

푸시 사이드 메뉴 플러그인(응답형 메뉴)을 워드프레스 테마로 적절히 구현하려고 합니다.SO @Congrim 답변을 바탕으로, 고객의 요구 사항을 해결할 수 있는 방법을 마련했습니다.bodypush-menu가 열려 있을 때 스크롤할 때(모든 요소 포함)header고정) 대화형 링크를 제외합니다.class=edge-ils edge-ils-with-scroll edge-ils-light푸시 메뉴가 열리면 계속 위쪽으로 이동합니다.

이 시퀀스를 저장해 두었습니다.congrim.js파일, 나는 대본을 그 주제에 맞춰 놓았습니다.functions.php파일:

function lockScroll() {
    if ($('body').hasClass('lock-scroll')) {
        $('body').removeClass('lock-scroll');
    }
    else {
        $('body').addClass('lock-scroll');
    }
}


/* I've implemented `onclick="lockScroll();"` in button element, 
 * using this sequence in the same congrim.js file:
 */    

$(document).ready(function() {
    $('#responsive-menu-pro-button').click(function() {
       lockScroll();
    }); 
});

jQuery 랩을 제거해도 브라우저 콘솔(Chrome에서 테스트됨)에서 오류가 발생하지 않을 수 있습니다. 이와 같은 코드를 워드프레스(?)로 랩핑하는 것은 여전히 좋지 않은 방법일 수 있습니다. 이러한 상황에서는 유감스럽게도,overflow: hidden;적용되지 않습니다. 푸시 사이드 메뉴가 열리면 CSS 파일/섹션에서 이 클래스를 사용할 수 없습니다.

.lock-scroll {
    overflow: hidden;
}

코드를 사용하면 사용할 수 있습니다.

.lock-scroll {
    position: fixed;
}

질문:
대화형 링크를 갖기 위해 코드가 *나 다른 해결책을 구현하도록 강제할 가능성이 있습니까?class=edge-ils edge-ils-with-scroll edge-ils-light메뉴를 열기 전에 시청자가 클릭한 위치에서 고정된 상태로 유지하기 위해 푸시 사이드 메뉴를 열지 않는 것?

대화형 링크 문제에만 집중해주세요, 나머지 장면은 괜찮습니다 (header그리고.logo원래 있어야 할 것처럼 제자리에 있고 배경 사진도 그럴 것처럼 행동하고 있습니다.)

LE: *overflow: hidden;그것은 원치 않는 것을 만들어 낼 것 같습니다.body메뉴 열기/닫기 시 이동 효과, 이 단계에서는 발생하지 않는 스크롤 바 표시/숨기기 중.

LE2:congrim.js파일이 Outsource WordPress로 대체되었으니 아래 해결책을 참고하시기 바랍니다.

여기 웹사이트 테스트 페이지.

아래에 주어진 해결책을 확인해주시기 바랍니다.

1단계: 이 CSS 추가.scroll-lock{position:fixed !important;}.

2단계: 이 JS를 추가합니다.

$(document).ready(function() {
    var windowTop = 0;
    var menuOpen = 0;
    var offsetContainerList = 0;

    $('#responsive-menu-pro-button').click(function() {
        var offsetScrollList = $('.edge-ils-item-link:first').offset().top; 

        if ($('html').hasClass('scroll-lock')) {
            $('#responsive-menu-pro-container').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
              function(event) {
                  if (menuOpen==0) {
                      menuOpen = 1;
                      $('html').removeClass('scroll-lock');  
                      $('.edge-ils-content-table').css('top', eval(offsetContainerList)-40+'px'); //change image container top position
                      $('html').scrollTop(windowTop); //scroll to original position
                  }
                  else {   
                      menuOpen = 0;             
                  }
            });
        }
        else {                
            windowTop = $(window).scrollTop();
            offsetContainerList = $('.edge-ils-content-table').offset().top;  
            $('html').addClass('scroll-lock');      
            $('.edge-ils-content-table').css('top', -offsetScrollList + 'px'); //change image container top position
        }      
    }); 
}); 

그거에요!

당신의 커스텀 js 파일에 아래 코드를 추가해주시기 바랍니다.

 jQuery('#responsive-menu-pro-button').click(function(){
    var menu_active = jQuery(this).hasClass('is-active');
    if(menu_active){
        jQuery('body').css('position','fixed');
    }else{
       jQuery('body').css('position','static');
    }
});

도움이 되길 바랍니다.

감사해요.

스크롤은 자연스러운 네비게이터 기반 스크롤이 아니며, 스크롤을 에뮬레이트하기 위해 JS 어딘가에서 클래스를 교환합니다.edge-appeared,edge-up,edge-down).

푸시 사이드 메뉴가 열리면 이 클래스가 재설정됩니다.overflow-hidden그것을 바꾸지 않을 겁니다.

당신은 어떤 자바스크립트가 그 클래스들을 교환하고 있는지 찾아서 그것을 방지해야 합니다. 저는 더 많은 도움을 받고 싶지만 당신은 JS 파일을 너무 많이 가지고 있어서 이 모든 것을 처리하는 데 시간이 꽤 걸릴 것입니다.최소화, 완료 및 검증 가능한 예제를 만드는 데 성공한 경우 여기에 게시하십시오.

언급URL : https://stackoverflow.com/questions/51776867/how-to-prevent-body-from-scrolling-with-push-side-menu