React移动端汉堡菜单激活后无法滚动问题排查咨询

我在React项目中实现了汉堡菜单组件：点击图标触发burgerClick函数，当窗口宽度小于991.98px时，切换菜单状态并给document.documentElement添加/移除lock类。对应的body CSS如下：

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

汉堡菜单在移动端（max-width: $tablet）下为fixed定位，已设置overflow:scroll，但菜单激活（添加menu-open类）后无法滚动内容，尝试调整overflow属性仍无效，希望排查原因并解决该问题。

相关代码 #

React组件逻辑

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

菜单样式代码

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

问题原因 #

1. 触摸行为被完全禁用：.lock类给body设置了touch-action: none，该属性会禁止所有触摸交互，包括fixed菜单的滚动操作。
2. 容器高度计算异常：菜单使用min-height:100%配合padding-top: rem(80)，导致容器高度超出视口但滚动区域识别错误；同时overflow: scroll未明确滚动方向，在移动端表现不稳定。

解决步骤 #

1. 移除禁用触摸滚动的属性

修改body的.lock类样式，删除touch-action: none，恢复触摸滚动能力：

body {
  .lock & {
      overflow: hidden;
      /* 移除该属性，避免禁用触摸滚动 */
      /* touch-action: none; */
      overscroll-behavior: none;
  }
  .loaded & {
  }
}

2. 调整菜单容器的高度与滚动配置

修改.nav-header的移动端样式，确保容器高度正确，滚动行为正常：

@media (max-width: $tablet) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* 使用100vh确保容器占满视口高度 */
    height: 100vh;
    padding-top: rem(80);
    /* 开启border-box，避免padding撑大容器 */
    box-sizing: border-box;
    transform:translate(-120%,0%);
    transition: transform ease 1s 0s;
    /* 指定垂直滚动，添加webkit前缀优化移动端滚动流畅度 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    .menu-open & {
      transform:translate(0%,0%);
      transition: transform ease 1s 0s;
    }
}

3. 可选：优化内容容器高度

给菜单列表添加min-height: 100%，确保内容区域占满菜单容器，避免滚动区域异常：

.nav-header__list {
  min-height: 100%;
}

内容的提问来源于stack exchange，提问作者Максим Дмитриевич