푸시 사이드 메뉴로 신체 스크롤 방지 방법
푸시 사이드 메뉴 플러그인(응답형 메뉴)을 워드프레스 테마로 적절히 구현하려고 합니다.SO @Congrim 답변을 바탕으로, 고객의 요구 사항을 해결할 수 있는 방법을 마련했습니다.body
push-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
'programing' 카테고리의 다른 글
LINQ의 Select 명령에 해당하는 파워셸? (0) | 2023.10.05 |
---|---|
sigprocmask()에서 Set and Oldset(설정 및 이전 설정) (0) | 2023.10.05 |
와일드카드 호스트를 사용한 MariaDB 부여 권한이 작동하지 않습니다. (0) | 2023.09.25 |
도커 Ubuntu 이미지 내에 패키지를 설치할 수 없습니다. (0) | 2023.09.25 |
Typescript 컴파일 중 상대 가져오기 문에 .js 확장자 추가(ES6 모듈) (0) | 2023.09.25 |