当我打开“移动菜单”时,我设法禁用在正文上滚动,但当我打开“移动菜单”时,桌面/正文页面总是返回顶部

vxf3dgd4  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(287)

我设法禁用身体上的滚动,并没有问题,感谢如此!但当我打开手机菜单时,身体总是回到顶端。
如果我删除
溢出:隐藏
滚动不再是禁用身体,但身体不会回到顶部时,我打开我的手机菜单。
当菜单打开时,我的css类overflowhidden是附加的主体和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:我在下一步不知道这是否重要

qmb5sa22

qmb5sa221#

当你申请时 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;
}

相关问题