如何设置鼠标滚轮开始滚动时容器不动，滚轮到一定位置后容器切换

可以通过JavaScript监听鼠标滚轮事件，并根据滚轮当前位置与容器的位置来判断是否需要切换容器。以下是一个简单的示例代码：

HTML:

<div id="container">
  <div class="page" id="page1">Page 1</div>
  <div class="page" id="page2">Page 2</div>
  <div class="page" id="page3">Page 3</div>
</div>

CSS:

#container {
  height: 300px;
  overflow: hidden;
}

.page {
  height: 300px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#page1 {
  background-color: #f44336;
}

#page2 {
  background-color: #4caf50;
}

#page3 {
  background-color: #2196f3;
}

JavaScript:

const container = document.getElementById('container');
const pages = document.querySelectorAll('.page');
let currentPage = 0;

// 监听鼠标滚轮事件
container.addEventListener('wheel', (event) => {
  // 判断滚轮方向
  const delta = event.deltaY > 0 ? 1 : -1;

  // 计算当前页码
  currentPage += delta;
  if (currentPage < 0) {
    currentPage = 0;
  } else if (currentPage >= pages.length) {
    currentPage = pages.length - 1;
  }

  // 判断是否需要切换容器
  const pageOffsetTop = pages[currentPage].offsetTop;
  if (pageOffsetTop < container.scrollTop || pageOffsetTop + pages[currentPage].clientHeight > container.scrollTop + container.clientHeight) {
    container.scrollTo({
      top: pageOffsetTop,
      behavior: 'smooth'
    });
  }
});

在上述示例中，容器的高度设置为固定值，并且设置了`overflow:hidden`属性，这样当鼠标滚轮滚动时，滚轮事件会被容器捕获。同时，通过计算当前滚轮位置是否在当前页码所在的容器范围内，来判断是否需要切换容器。如果需要切换容器，则使用`scrollTo()`方法来平滑滚动到目标位置。

你可以根据自己的需求来修改上述代码，实现自己想要的效果。