Не скроллится бургер меню?

Question

[Bredy]

Есть бургер меню, которое открывается при клике на иконку

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

При открытии меню на html вешаю класс lock и на body добавляются стили:

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

на само меню добавлю следующие стили:
но почему то не скролится, не могу понять почему

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

Comments

[alexalexes]

Наверное, не хватает свойства overflow: auto на меню.

[Bredy]

alexalexes, удалил видать случайно. я добавлял ovefrol: scroll и auto, не скролит

[Bredy]

alexalexes, дописал как в текущей редакции с overflow

[alexalexes]

Чтобы контейнер начал прокручиваться, у него должна быть задана ограничительная высота, либо height, либо max-height.

[Bredy]

alexalexes, получилось спасибо.. убрал с min-heigh 100% на heigh 100%

Answer 1

[HARDOOPS]

Смысл бургер-меню в том, что оно раскрывается на полный экран. Для этого устанавливаем html, body и .burger-menu height: 100%. Далее устанавливаем для .burger-menu overflow-y: auto; либо overflow-y: scroll;, чтобы контент не прыгал туда-сюда.

Comments

[Bredy]

в комментариях к посту подсказал человек это же решение, спасибо