Responsive 메뉴로 신체 스크롤 방지 방법
나는 응답형 메뉴 플러그인을 워드프레스 테마로 적절히 구현하려고 합니다.푸시 사이드 메뉴가 열려 있으면 문제가 나타납니다.body수직 스크롤로 이동합니다.
지금 이 템플릿 페이지에 대한 솔루션이 있습니다. 아주 효과적이고 결과에 만족합니다.
질문:위의 지정된 페이지를 수정하는 Outsource WordPress의 답변을 고려할 때, 여기에서 이미 실행되고 있는 것과 같이 다른 템플릿 페이지에서도 보다 일반적인 방식으로 사용할 수 있도록 아래 코드를 수정할 가능성이 있습니까?
그럴 ..edge-ils-item-link그리고..edge-ils-content-table변수이지만 어떻게 접근하고 적응해야 할지 모르겠습니다. 이러한 요소를 대체하는 테스트를 몇 가지 했지만 긍정적인 결과는 없습니다. 단순하지 않을 수도 있고 그 이상입니다.도 그다를 있습니다.edge-wrapper,edge-wrapper-inner,wpb_wrapper모든 페이지에서 볼 수 있습니다. 이러한 요소는 솔루션을 모든 페이지에서 사용할 수 있도록 변경할 수 있는 일반적인 요소일 수 있습니다.
또한 최신 버전에 따라 jQuery가 준비되어 있으면 좋을 것입니다(현재 저는 jQuery migration 1.4.1과 이전 버전의 워드프레스를 사용하고 있습니다).
.scroll-lock{position:fixed !important;}
$(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
}
});
});
문제가 있는 비디오입니다. 여기 도움이 된다면요.
좋아요, 먼저 이 문제에 대해 얘기해보죠.
이 입니다를(를) .transform: translateX(800px);에서,나,position: fixed모든 아이들로부터, 그래서 위치가 고정된 모든 당신의 내부 디브들은 기본적으로 위치 상대적으로 움직여서 기본적으로 위로 옮겨집니다.
너무 복잡한 솔루션:
물론 사용자를 위쪽으로 스크롤하여 사용자의 위치를 저장하고 이 문제를 해결하기 위해 복잡한 해결책을 수행할 수 있지만, 이 모든 것을 왼쪽 메뉴에 대해 수행할 수 있습니까?단순한 고정 디브가 다른 고정 디브를 오른쪽으로 밀기에는 너무 많은 일인 것 같습니다.
쉬운 해결책:변형을 생략하고 마진 레프트를 사용하면 어떨까요?
<style>
html.responsive-menu-pro-open {
overflow-y: hidden !important;
padding-right: 9px;
}
#responsive-menu-pro-container {
position: fixed !important;
}
#responsive-menu-pro-container {
position: fixed !important;
transform: none !important;
margin-left: -800px;
transition: 2.6s ease;
transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
transition-property: margin-left;
}
#responsive-menu-pro-button {
transform: none !important;
transition: 2.6s ease !important;
transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1) !important;
transition-property: margin-left !important;
}
.responsive-menu-pro-open #responsive-menu-pro-button {
margin-left: 800px;
}
#responsive-menu-pro-header {
transform: none !important;
transition: 2.6s ease;
transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
transition-property: margin-left;
}
.responsive-menu-pro-open #responsive-menu-pro-header {
margin-left: 800px;
}
.responsive-menu-pro-open .edge-wrapper {
transform: none !important;
}
.responsive-menu-pro-open .edge-wrapper .edge-wrapper-inner {
margin-left: 800px;
}
.edge-wrapper .edge-wrapper-inner {
transition: 2.6s ease;
transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
transition-property: margin-left;
}
.responsive-menu-pro-open .edge-content .edge-ps-navigation {
margin-left: 800px;
}
.edge-content .edge-ps-navigation {
transition: 2.6s ease;
transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
transition-property: margin-left;
}
.responsive-menu-pro-open #responsive-menu-pro-container {
margin-left: 0;
transition: 2.6s ease;
transition-timing-function: cubic-bezier(0.96, 0, 0.13, 1);
transition-property: margin-left;
}
.responsive-menu-pro-open .edge-back-to-top-text {
display: none;
}
</style>
위의 토막글을 추가하면 여백 왼쪽을 사용하여 변환하지 않고 원하는 기능을 모방할 수 있습니다.
참고 - 페이지 레이아웃(약간 엉망이고 위치 고정 요소가 많고 다른 위치 고정 요소 내부에 있음) 때문에 여백 왼쪽을 다른 요소로 설정해야 합니다. 페이지 레이아웃을 변경하면 이를 적용하기가 훨씬 쉬워지거나 플러그인의 기본 변환 기능을 사용할 수도 있습니다.
이 솔루션은 제공한 예제 페이지에서만 작동할 수 있습니다. 다른 페이지의 올바른 요소에 marign-left를 설정해야 하지만, 모든 페이지를 단일 래퍼 디브(div)로 레이아웃하여 기능을 유지하고 다른 고정 요소를 제거하면 페이지에서 작동하는 단일 코드 조각을 만들 수 있습니다.
결론 - 플러그인은 사용자의 페이지 레이아웃 때문에 문제가 있으며, 플러그인 개발자에게 연락하면 더 나은 답변을 얻을 수 있으며, 특정 테마를 조사하여 훨씬 더 나은 솔루션을 제공할 수 있습니다.당신의 코드를 보지 않고도 스크롤을 사용하지 않고 찾을 수 있는 최선의 해결책입니다.
는 .scroll-lock는 "이라는 페이지의 요소에 scroll-lock의 HTML만 "ilinks-push"됩니다에 추가됩니다.따라서 html에 이 클래스가 있는지 확인하면 하위 페이지에서 절대 사실이 되지 않습니다..responsive-menu-pro-open.
하지만 서브페이지에서 작동하려면 제공된 코드의 논리를 이해해야 합니다.좀 더 명확하게 하기 위해 몇 가지 변경 사항을 적용하고 의견을 추가했습니다.
$(document).ready(function() {
var windowTop = 0;
$('#responsive-menu-pro-button').click(function() {
/* check if there is a ils item link */
if ( $('.edge-ils-item-link')[0] ) {
/* save space above the element to variable */
var offsetScrollList = $('.edge-ils-item-link:first').offset().top;
}
/****** Menu gets opened ******/
if ($('html').hasClass('responsive-menu-pro-open')) {
/* scroll to top of page */
windowTop = $(window).scrollTop();
/* add the scroll-lock class */
$('html').addClass('scroll-lock');
/* check if there is a ils item link */
if ( $('.edge-ils-item-link')[0] ) {
/* add the saved space again to look like the same scroll position we started with */
$('.edge-ils-content-table').css('top', -offsetScrollList + 'px');
}
}
/****** Menu gets closed ******/
else {
$('html').removeClass('scroll-lock');
/* check if there is a ils item link */
if ( $('.edge-ils-item-link')[0] ) {
/* again use the saved space to make it look like the start position */
$('.edge-ils-content-table').css('top', -offsetScrollList +'px');
}
$('html').scrollTop(windowTop);
}
});
});
요가 있는 .check if there is a ils item link써있었다고요?
이것은 당신의 서브페이지에서 다른 부분이 될 것입니다.
할 경우.offset().top우리는 요소 위의 공간을 얻고 있습니다.입니다 합니다..edge-ils-item-link그래서 if 절 안에 코드를 넣었습니다.
코드에서 위의 공백을 사용하여 요소를 올바른 위치에 배치하므로 스크롤이 차단된 것처럼 보입니다.
올바른 요소를 공략하기 위해서는 그 수준의 요소가 필요합니다.
따라서 모든 페이지가 콘텐츠 영역을 중심으로 동일한 클래스를 사용하도록 해야 합니다.이렇게 하면 자바스크립트의 추가 if 절 없이 모든 페이지에서 대상을 지정할 수 있습니다.
또는 if 절의 바운드를 수정하고 페이지의 요소를 확인할 수 있습니다.이라고 은 "scroll-lock"입니다의 일 수 있습니다.info-field공간을 설정하는 데 사용할 수 있습니다. 이 모르겠습니다. 빌더 하고 계십니까? 훌륭합니다다 다)를 할 때 당신은 화려한 블록 빌더 같은 것을 사용하고 있습니까? 마크업은 놀랍습니다). 따라서 클래스를 추가할 때 문제가 발생합니다.scroll-lock와 함께position: fixed;.
다른 페이지 내용을 조정해야 이 문제가 해결될 수 있을 것 같습니다.컨텐츠 요소가 다른 모든 서브 페이지에 대해 자바스크립트를 조정하는 것은 좋은 방법이 아닙니다.모든 하위 페이지를 두 열로 만듭니다(flexbox 사용).아마도 왼쪽 것은 항상 고정되고 오른쪽 것은 정적이므로 스크롤이 가능할 것입니다.우리는 당신의 질문에 주어진 정보로는 이것을 모릅니다.
더하다min-height: 100vh;바디 태그에 연결합니다.내용이 뷰포트 높이를 초과하는 경우에만 verticle 스크롤이 표시됩니다.
현재 페이지의 문서 높이는 상대적으로 위치한 하위 항목의 전체 높이로 잠겨 있습니다.아래 스크린샷을 참조합니다.
따라서 필요한 행동에 따라 이해한 내용을 다시 평가하면 솔루션은 간단하며 복잡하게 만들 필요가 없다고 생각합니다.
페이지들과 스크립트의 동작을 보면서 클래스 스크롤 잠금이 DOM에 추가되지 않는 것을 발견했지만, 메뉴를 연 후 HTML 요소에 추가되는 응답형-메뉴-프로오픈이라는 클래스 이름만 믿고 있어도 된다고 생각합니다.그러니 이 클래스에 CSS 속성을 설정해보세요. 그러면 당신은 갈 준비가 되어 있다고 생각합니다.확인 부탁드립니다.
.responsive-menu-pro-open{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
제가 직접 시도해봤는데 완벽하게 잘 되었으니 도움이 되었으면 좋겠습니다 :)
이 문제를 해결하는 가장 좋은 방법은 사용 중인 응답 메뉴라는 워드프레스 플러그인을 사용하는 것입니다. 이 메뉴를 편집할 수 있습니다.제 사이트인 Couv's Corner에서 사용합니다.다음은 몇 가지 문제 해결 방법입니다.
- 플러그인이 최신인지 확인하고 최근에 업데이트되었으며 훨씬 더 좋아졌습니다.
- 하위 메뉴(부모 범주 아래에 중첩된 메뉴 항목)가 가장 좋습니다.필요한 곳에 사용하세요.관리 대시보드의 "메뉴" 페이지에서 이를 사용자 정의합니다.
- 테마를 확인합니다.카덴스 WP는 좋은 것입니다.일부를 중심으로 게임을 해보세요. B/C 테마에 충돌이 있을 수 있습니다.
- 사이트 데이터베이스/파일 최적화를 실행하고 캐시/cdn을 사용할 경우 해당 캐시/cdn을 삭제해 보십시오.그러면 문제를 해결하는 데 도움이 될 수 있습니다.도움이 되길 바랍니다.플러그인과 제 사이트에 어떻게 설정되어 있는지 확인해 보시기 바랍니다.
언급URL : https://stackoverflow.com/questions/65983320/how-to-prevent-body-from-scrolling-with-responsive-menu
'programing' 카테고리의 다른 글
| __builtin_clz 구현 (0) | 2023.10.02 |
|---|---|
| R에서 두 목록 병합 (0) | 2023.10.02 |
| Python에서 lxml 라이브러리를 사용하여 xml 파일 쓰기 (0) | 2023.10.02 |
| 오류 2003(HY000):MySQL 서버에 연결할 수 없음 (111) (0) | 2023.10.02 |
| 각도 : ng-if 지시로 조건을 표현하는 방법? (0) | 2023.10.02 |