不要滾動漢堡菜單

Question

正文 CSS

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

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

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

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

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

return (
        <div className= {!stateMenuBurgerHeader
            ? "header__burger"
            : "header__burger menu-open"
        }>
            <MyButton
                className = "header__btn-burger icon-menu"
                type = "button"
                >
                    <span></span>
            </MyButton>
                <nav className="header__nav nav-header">
                    <ul className="header__list nav-header__list">
                        {widthWindow && widthWindow >= 950
                            ? burgerMenu.map((item) =>
                                <LinkBurger
                                    burgerMenuList = {item}
                                    key = {item.text}
                                    className = {item.icon}
                                />)
                            : burgerMenuSecond.map((item) =>
                                <LinkBurger
                                    burgerMenuList = {item}
                                    key = {item.text}
                                    className = {item.icon}
                                />)
                        }
                    </ul>
                </nav>
        </div>
    );

組件標題選單

<div className="header__cover-lines">
        <div className = "header__cover-left-block"
            onMouseEnter={burgerMouseEnter}
            onMouseLeave={burgerMouseLeave}
            onClick = {burgerClick}
        >
            <BurgerMenu/>
            <div className="header__menu-block">CinemaGO</div>
    </div>

漢堡菜單的 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;
        }
    }

Answer 1

在我寫了 height 而不是 min-height 之後它就可以工作了

更改前的程式碼

@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;
        }
    }