當移動菜單打開時，我設法禁用了身體滾動，但是當我打開移動菜單時，桌面/正文頁面總是回到頂部

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