正文 CSS

body { .lock & { overflow: hidden; touch-action: none; overscroll-behavior: none; } .loaded & { } }

當我點擊圖示時，程式碼會新增 HTML 類別「lock」

const burgerClick = (e:React.MouseEvent) => { if (widthWindow && widthWindow < 991.98) { dispatch(changeStateMenuBurgerHeader(!stateMenuBurgerHeader)) document.documentElement.classList.toggle('lock'); } }

我有漢堡菜單的組件。 我想在選單處於活動狀態時滾動。

我單擊圖標，然後漢堡菜單處於活動狀態，並且我為主體添加類別“鎖”。

return ( 
     
 );

組件標題選單

 
  
CinemaGO
 

漢堡菜單的 CSS。 但是當 mene 處於活動狀態時我無法滾動它並且我不明白為什麼 我嘗試編寫溢出隱藏並滾動它。

.nav-header{ background-color: rgba(21, 21, 21, 0.96); z-index: 4; @media (min-width: $tablet) { padding-bottom: rem(10); padding-top: rem(100); border-radius: rem(10); min-width: rem(400); margin-left: -10px; position: absolute; top: 0; left: 0; transform: translate(0px,-30px); } @media (max-width: $tablet) { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; padding-top: rem(80); transform:translate(-120%,0%); transition: transform ease 1s 0s; overflow: scroll; .menu-open & { transform:translate(0%,0%); transition: transform ease 1s 0s; } }

@media (max-width: $tablet) { position: fixed; top: 0; left: 0; min-width: 100%; **min-height: 100%;** padding-top: rem(80); transform:translate(-120%,0%); transition: transform ease 1s 0s; overflow: scroll; .menu-open & { transform:translate(0%,0%); transition: transform ease 1s 0s; } }

@media (max-width: $tablet) { position: fixed; top: 0; left: 0; min-width: 100%; **height: 100%;** padding-top: rem(80); transform:translate(-120%,0%); transition: transform ease 1s 0s; overflow: scroll; .menu-open & { transform:translate(0%,0%); transition: transform ease 1s 0s; } }