如何实现hamburger激活时仅navbar.php内容可滚动，其余页面静态？

核心思路 #

通过CSS控制元素的overflow属性，配合JavaScript切换类名，实现汉堡菜单激活时锁定页面主体滚动、仅导航栏内部可滚动的效果。

1. CSS 样式设置 #

先定义锁定滚动的类，以及导航栏激活时的滚动规则：

/* 锁定页面主体/body的滚动 */
.scroll-locked {
  overflow: hidden;
  height: 100vh;
}

/* 导航栏激活时，允许内部内容滚动 */
.hamburger.active + .navbar-container {
  overflow-y: auto;
  max-height: 100vh; /* 限制导航栏高度，超出内容才会滚动 */
  /* 如果导航栏是固定定位，补充定位属性 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* 可选：隐藏导航栏滚动条，优化视觉体验 */
.navbar-container::-webkit-scrollbar {
  width: 0;
}

2. JavaScript 控制类切换 #

在navbar.php中添加点击事件监听，切换汉堡的激活状态和页面主体的滚动锁定类：

// 获取汉堡按钮元素
const hamburgerBtn = document.querySelector('.hamburger');
// 获取页面主体容器（如果home.php的内容有专属容器，用其id；否则直接操作body）
const mainContent = document.getElementById('dashboard-content') || document.body;

hamburgerBtn.addEventListener('click', () => {
  // 切换汉堡的active类
  hamburgerBtn.classList.toggle('active');
  // 切换页面主体的滚动锁定类
  mainContent.classList.toggle('scroll-locked');
});

3. 关键细节说明 #

• 确保导航栏的内容容器（比如.navbar-container）有明确的高度限制（如max-height: 100vh），否则内部内容不会触发滚动。
• 如果直接锁定body，移动端可能出现地址栏导致的高度异常，可改用以下CSS：

html.scroll-locked, body.scroll-locked {
  height: 100%;
  overflow: hidden;
}

• 因为navbar.php和home.php独立，要保证JS能正确找到页面中的主体元素，建议给home.php的仪表盘容器设置唯一id（比如dashboard-content），避免选择错误。

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