如何使菜单滚动只在一个部分内显示页面？

<div class="container">
  <div class="menu">
    <!-- 菜单内容 -->
  </div>
  <div class="content">
    <!-- 页面内容 -->
  </div>
</div>

.container {
  height: 500px; /* 设置容器高度 */
  overflow: auto; /* 设置容器内容溢出时显示滚动条 */
}

.menu {
  width: 200px; /* 设置菜单宽度 */
  float: left; /* 将菜单浮动到左侧 */
}

.content {
  margin-left: 200px; /* 设置内容区域的左边距，使其不被菜单遮挡 */
}

var menu = document.querySelector('.menu');

menu.addEventListener('wheel', function(e) {
  var container = document.querySelector('.container');
  var scrollTop = container.scrollTop;
  var scrollHeight = container.scrollHeight;
  var clientHeight = container.clientHeight;

  if ((e.deltaY < 0 && scrollTop <= 0) || (e.deltaY > 0 && scrollTop + clientHeight >= scrollHeight)) {
    e.preventDefault(); // 阻止事件冒泡，防止页面整体滚动
  }
});