全屏菜單打開時如何禁用正文滾動

Question

誰能告訴我打開全屏菜單時如何禁用滾動？ 下面的代碼是我目前擁有的。 我需要在菜單打開時禁用桌面和移動設備上的滾動，因為此時您可以在打開菜單時滾動，並且在您關閉菜單時會在不知不覺中最終出現在頁面的不同部分。

 :root { --color-secondary: #75757C; --color-dark: #364C62; --color-light: #F5F5F5; --td: 150ms; --te: cubic-bezier(0.215, 0.61, 0.355, 1); }.page-container > * + * { margin-top: 1.5rem; }.navigation-container { position: relative; }.nav-main { align-items: center; display: flex; height: 100%; justify-content: center; left: -100%; position: fixed; transition: left 0s calc(var(--td) * 2), transform 0s calc(var(--td) * 2); width: 100%; z-index: 99; }.nav-main::before, .nav-main::after { content: ''; background-color: #0e0e0e; height: 100%; left: 0; position: absolute; transform: translateX(-110%); transform-origin: 0 50%; transition: transform calc(var(--td) * 2) var(--td) var(--te); width: 100%; z-index: -100; }.nav-main::before { top: -7%; }.nav-main::after { bottom: 0; }.nav-main.menu__item { opacity: 0; transform: translateX(-1rem); transition: opacity var(--td) var(--te), transform var(--td) var(--te); } [id="main-navigation-toggle"] { opacity: 0; position: fixed; top: -100%; } [id="main-navigation-toggle"] ~ label { cursor: pointer; position: absolute; right: 0rem; top: 0rem; z-index: 100; } [id="main-navigation-toggle"] ~ label span { display: block; height: 125px; padding: 0rem; position: relative; transition: transform calc(var(--td) * 3) var(--te); width: 2.7rem; } [id="main-navigation-toggle"] ~ label span::before, [id="main-navigation-toggle"] ~ label span::after { background-color: #FB4D98; bottom: 0; content: ''; height: 5px; left: 0; margin: auto; position: absolute; right: 0; transition: transform calc(var(--td) * 3) var(--te); top: 0; width: calc(100% - 1rem); } @media screen and (max-width: 768px) { [id="main-navigation-toggle"] { opacity: 0; position: fixed; top: -100%; } [id="main-navigation-toggle"] ~ label { cursor: pointer; position: absolute; z-index: 100; } [id="main-navigation-toggle"] ~ label span { display: block; height: 27px; right: -8px; padding: 0.5rem; position: relative; transition: transform calc(var(--td) * 3) var(--te); width: 2.7rem; } [id="main-navigation-toggle"] ~ label span::before, [id="main-navigation-toggle"] ~ label span::after { background-color: #FB4D98; bottom: 0; content: ''; height: 5px; left: 0; margin: auto; position: absolute; right: 0; transition: transform calc(var(--td) * 3) var(--te); top: 0; width: calc(100% - 1rem); } } [id="main-navigation-toggle"] ~ label span::before { transform: rotate(0) translateY(-100%); } [id="main-navigation-toggle"] ~ label span::after { transform: rotate(0) translateY(100%); } [id="main-navigation-toggle"]:checked ~ label span { transform: rotate(1turn); } [id="main-navigation-toggle"]:checked ~ label span::before { transform: rotate(45deg); } [id="main-navigation-toggle"]:checked ~ label span::after { transform: rotate(-45deg); } [id="main-navigation-toggle"]:checked ~.nav-main { left: 0; transition: transform 0s; } [id="main-navigation-toggle"]:checked ~.nav-main::before, [id="main-navigation-toggle"]:checked ~.nav-main::after { transform: translateX(0); transition-delay: 0s; } [id="main-navigation-toggle"]:checked ~.nav-main::after { transition-delay: calc(var(--td) / 0); } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item { opacity: 1; transform: translateX(0); transition: opacity calc(var(--td) * 2) var(--te), transform calc(var(--td) * 2) var(--te); } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(1) { transition-delay: calc(var(--td) * 2 * (1 * 0.25)); z-index: -1; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(2) { transition-delay: calc(var(--td) * 2 * (2 * 0.25)); z-index: -2; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(3) { transition-delay: calc(var(--td) * 2 * (3 * 0.25)); z-index: -3; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(4) { transition-delay: calc(var(--td) * 2 * (4 * 0.25)); z-index: -4; } [id="main-navigation-toggle"]:checked ~.nav-main.menu__item:nth-child(5) { transition-delay: calc(var(--td) * 2 * (5 * 0.25)); z-index: -5; }.menu { position: relative; text-align: center; z-index: 1; }.menu >.menu__item { font-family: alliance;important: font-size; 10vmin: text-transform; uppercase: } @media only screen and (max-width. 600px) {:menu { position; relative: text-align; center: margin-top;-7%: z-index; 1. } }:submenu { left; 0: opacity; 0: position; absolute: transform; translateY(-10%): top; 100%: width; 100%: visibility; hidden: z-index; 2. }.submenu:menu__item { font-family; var(--font-family-primary): font-size. 3;5vmin: width; 100%. }.submenu:menu__link { color; var(--color-secondary): text-shadow, 1px 1px 0 var(--color-primary); 2px 2px 0 var(--color-primary). }.submenu:menu__link:,before. .submenu:menu__link::after { display; none. }:menu__item { display; block: position; relative. }:menu__item.hover:menu__link:,before. :menu__item.hover:menu__link::after { animation, blink 1s var(--td) steps(1; end) forwards infinite: transform. translateX(calc(100% - 0;5rem)): transition-duration; calc(var(--td) * 3). }:menu__item.hover:menu__link::after { transition-delay; calc(var(--td) / 2). }:menu__item.hover:submenu { opacity; 1: transform; translateY(0): transition, transform calc(var(--td) * 2) calc(var(--td) * 3) var(--te), opacity calc(var(--td) * 2) calc(var(--td) * 3) var(--te); visibility 0s calc(var(--td) * 3): visibility; visible. }:menu__link { color; #F4FB82: display; inline-block: font-weight; normal: overflow; hidden: padding. 0.5rem 1rem 0;125rem: position; relative: text-decoration; none: transition, color var(--td) var(--te), opacity var(--td) var(--te); transform var(--td) var(--te): z-index; 1. }:menu__link:,before. :menu__link::after { content; '': background-color; #fb4d98: height; 50%: left; 0: position; absolute: transform; translateX(-110%): transform-origin; 0 50%: transition; transform 0s var(--te): width; 100%: z-index; -1. }:menu__link::before { top; 0. }:menu__link::after { bottom; 0. }:menu:not(:focus-within):not(.hover).menu__item:menu__link { opacity; 1: transform, translate(0; 0). }:menu__item { --pull; 30%. }.menu__item:menu__link { opacity. 0;25: transition-duration; calc(var(--td) * 3): transform, translate(0; calc(var(--pull) * -1)). }.menu__item.submenu:menu__link { opacity; 1. }:menu__item.hover >:menu__link { color; #fb4d98: opacity; 1: transform, translate(0; 0). }:menu__item.hover >:menu__link:hover { color; var(--color-light): transition-delay; 0s. }:menu__item.hover ~.menu__item >:menu__link { transition-duration; calc(var(--td) * 3): transform, translate(0; var(--pull)), } @keyframes blink { 50%: 100% { opacity; 0; } }

 <div class="navigation-container"> <input type="checkbox" id="main-navigation-toggle" class="btn btn--close" title="Toggle main navigation" /> <label for="main-navigation-toggle"> <span></span> </label> <nav id="main-navigation" class="nav-main"> <ul class="menu"> <li class="menu__item"> <a class="menu__link" href="#0">Home</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">About</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Projects</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Contact</a> </li> </ul> </nav> </div>

Answer 1

我相信您想在切換菜單按鈕時啟用和禁用頁面滾動。 您可以通過使用 jQuery 來實現此目的：

$('input[id="main-navigation-toggle"]').on('change',function(e) {
if ($(this).prop('checked')) {
    $('body').css('overflow', 'hidden');
} else {
    $('body').css('overflow', 'auto');
};
});

此代碼將檢查您提供的帶有id = main-navigation-toggle的復選框輸入是否已選中，如果已選中，則 body 元素的overflow CSS 屬性將設置為hidden ，如果未選中則overflow屬性將設置為auto ，這意味着當菜單關閉時再次啟用滾動。

Answer 2

使用此屬性修改此 class

[id="main-navigation-toggle"] ~ label {
cursor: pointer;
position: absolute;
right: 2rem;
top: 0rem;
z-index: 100;

}

正確的值已更改，我嘗試了這個，或者如果你想禁用滾動

body{
    overflow: hidden;
}