当移动菜单打开时，我设法禁用了身体滚动，但是当我打开移动菜单时，桌面/正文页面总是回到顶部

Question

我设法在身体上禁用滚动，没问题，多亏了 SO！ 但是当我打开我的移动菜单时，身体总是回到顶部。

如果我删除

溢出：隐藏

滚动不再在 body 上禁用，但是当我打开我的移动菜单时，body 不会回到顶部。

当 burgermenu 打开时，我的 css 类 .overflowHidden 被添加到 body 和 html 上。

    const [showBurgerMenu, setShowBurgerMenu] = useState(false)


const handleOnClick = () => {
    const burger = document.querySelector('.burger');
    burger.classList.toggle('active');
    setShowBurgerMenu(!showBurgerMenu);
    if (showBurgerMenu === false) {
        document.querySelector("body").classList.add("overflowHidden");
        document.querySelector("html").classList.add("overflowHidden")
    } else if (showBurgerMenu === true) {
        document.querySelector("body").classList.remove("overflowHidden");
        document.querySelector("html").classList.remove("overflowHidden");
    };
}

我的 CSS 类

.overflowHidden {
  overflow: hidden;
  margin: 0;
  touch-action: none;
  -ms-touch-action: none;
  position: fixed;
  height: 100%;
}

感谢您的帮助 PS：我在 nextJS 不知道这是否重要

Answer 1

申请position : fixed; 然后返回您将重置身体的位置，因为固定元素不是页面流的一部分

然后我们必须将它的高度从 100% 更改为 100vh，以便元素（在本例中为主体）的高度占据整个屏幕并防止出现任何滚动条，因为我们定义了高度。

.overflowHidden {
  overflow: hidden;
  margin: 0;
  touch-action: none;
  -ms-touch-action: none;
  /* position: fixed; we get rid of this line which resets the flow of the page */
  /* height: 100%; we change 100% to 100vh */ 
  height: 100vh;
}