不要滚动汉堡菜单-PHP中文网问答

正文 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 (
        
            
                    
            
                
                    
                        {widthWindow && widthWindow >= 950
                            ? burgerMenu.map((item) =>
                                )
                            : burgerMenuSecond.map((item) =>
                                )
                        }
                    
                
        
    );

组件标题菜单


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