要防止身体滚动,即使滚动汉堡包菜单,可以通过以下方法实现:
overflow: hidden
来禁止页面滚动。将该属性应用于body
或具有滚动效果的容器元素,可以阻止页面滚动。// 禁止滚动
function disableScroll() {
document.body.style.overflow = 'hidden';
document.addEventListener('touchmove', preventDefault, { passive: false });
}
// 启用滚动
function enableScroll() {
document.body.style.overflow = '';
document.removeEventListener('touchmove', preventDefault);
}
// 阻止默认滚动事件
function preventDefault(event) {
event.preventDefault();
}
在打开汉堡包菜单时,调用disableScroll()
函数来禁止滚动,关闭菜单时调用enableScroll()
函数来启用滚动。
body-scroll-lock
、react-scrolllock
等。这些库提供了简单的API来控制滚动行为。总结起来,防止身体滚动,即使滚动汉堡包菜单,可以通过CSS属性、JavaScript代码或使用第三方库来实现。具体选择哪种方法取决于项目需求和开发环境。
领取专属 10元无门槛券
手把手带您无忧上云