网站全屏菜单打开时无法禁用滚动的CSS问题求助

我在网站上实现了一个全屏菜单，但菜单打开时无法禁用页面滚动。尝试过给菜单添加position: fixed !important;和调整overflow属性，但都没生效。相关CSS代码如下：

/*****************************************/
/*********| FULLSCREEN MENU CSS |*********/
/*****************************************/

/* Move the hamburger to the right of the header */
.de-burger-menu .et_pb_menu__wrap {
  justify-content: flex-end !important;
}

/* Hide the desktop menu */
.de-burger-menu .et_pb_menu__wrap .et_pb_menu__menu {
  display: none !important;
}

/* Force the mobile version of the menu */
.de-burger-menu .et_pb_menu__wrap .et_mobile_nav_menu {
  display: block !important;
  align-items: center !important;
}

/* Fullscreen Menu Style when Opened*/
.de-burger-menu .opened #mobile_menu1 {
  width: 100vw !important; /* Make it span the full width of the viewport */
  position: fixed !important;
  top: 0em !important;
  left: 0vw !important;
  height: 100vh !important; /* Make it span the full height of the viewport */
  display: flex !important;
  justify-content: center !important;
  flex-direction: column !important;
  transition: visibility 0.3s, opacity 0.3s ease-in-out; /* Animate the menu to fade in */
  padding: 0 !important;
  background-color: #ffffff!important; /* Fullscreen menu background color */
}

/* Show fullscreen menu */
.de-burger-menu .opened #mobile_menu1 {
  opacity: 1 !important; /* Make it visible by setting opacity to 1 */
  visibility: visible !important; /* Show the menu */
}

/* Hide and fade out the Menu when closed */
.de-burger-menu .closed #mobile_menu1 {
  opacity: 0 !important; /* Make it invisible by setting opacity to 0 */
  visibility: hidden !important; /* Hide the menu */
  transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out !important; /* Animate the menu to fade out */
}

/* Remove Bullets next to LI Elements */
.de-burger-menu #mobile_menu1 li {
  list-style: none !important;
  text-align: center !important;
  width: 100%
}

/* Make sure that the menu is above other elements */
.de-burger-menu .et_pb_menu__wrap span.mobile_menu_bar {
  z-index: 999999 !important;
}

/* Set the close icon for when the menu is open */
.de-burger-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
  color: #562f2f !important; /* Icon color */
  content: "\4d" !important; /* Divi font icon to use for the close icon */
  left: -40px; /* Close icon position. You might need to play with this to make it look right */
}

/* Keep hamburger icon in fixed position on mobile */
.de-burger-menu .opened .mobile_menu_bar {
  position: fixed !important;
}

/* Remove mobile menu border */
.de-burger-menu .et_mobile_menu {
  border-top: none;
}

/* Make sure the menu items do not show a background */
.de-burger-menu .et_mobile_menu .menu-item-has-children>a {
  background-color: transparent;
}

/* Remove the hover background from the menu items and add hover animation */
.et_mobile_menu li a:hover {
  background-color: transparent;
  opacity: 1;
  transition: transform 0.3s ease-in-out !important; /* Animated the menu item when hovered */
  transform: scale(1.15); /* Enlarge the hovered menu item by 15% when hovered */
}

/* Remove menu item bottom borders */
.de-burger-menu .et_mobile_menu li a {
  border-bottom: none;
}

核心原因 #

之前的CSS只处理了菜单本身的定位，但页面的滚动由<body>/<html>元素控制，必须直接修改根元素的样式才能禁用滚动。

解决方案 #

1. 新增控制页面滚动的CSS

添加以下规则，用于禁止页面滚动并保存滚动位置：

/* 菜单打开时锁定页面滚动 */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  top: calc(-1 * var(--scroll-top));
}

2. 添加JavaScript监听菜单状态

通过JS监听汉堡按钮的点击事件，切换body的类并记录滚动位置，避免菜单关闭后页面跳回顶部：

const menuToggle = document.querySelector('.mobile_menu_bar');
const burgerMenu = document.querySelector('.de-burger-menu');

menuToggle.addEventListener('click', () => {
  // 切换菜单的opened/closed类
  burgerMenu.classList.toggle('opened');
  burgerMenu.classList.toggle('closed');

  const body = document.body;
  if (body.classList.contains('menu-open')) {
    // 关闭菜单时恢复滚动
    const scrollTop = parseInt(body.style.getPropertyValue('--scroll-top')) || 0;
    body.classList.remove('menu-open');
    body.style.removeProperty('--scroll-top');
    window.scrollTo(0, scrollTop);
  } else {
    // 打开菜单时锁定滚动，记录当前位置
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    body.style.setProperty('--scroll-top', `${scrollTop}px`);
    body.classList.add('menu-open');
  }
});

3. 优化菜单层级（可选）

确保菜单层级低于汉堡按钮，保证关闭按钮可点击：

.de-burger-menu .opened #mobile_menu1 {
  z-index: 999998 !important;
}

内容的提问来源于stack exchange，提问作者TOKI