我设法禁用身体上的滚动,并没有问题,感谢如此!但当我打开手机菜单时,身体总是回到顶端。
如果我删除
溢出:隐藏
滚动不再是禁用身体,但身体不会回到顶部时,我打开我的手机菜单。
当菜单打开时,我的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:我在下一步不知道这是否重要
1条答案
按热度按时间qmb5sa221#
当你申请时
position : fixed;
然后返回,您将重置主体的位置,因为固定元素不是页面流的一部分然后,我们必须将其高度从100%更改为100vh,以便元素(在本例中为主体)的高度占据整个屏幕,并防止出现任何滚动条,因为我们定义了高度。