HTML网页切换 上下滚动

您可以使用JavaScript来实现网页上下滚动的效果。下面是一个简单的实现示例：

1. HTML结构：

<div id="container">
  <div id="content1">Content 1</div>
  <div id="content2">Content 2</div>
  <div id="content3">Content 3</div>
</div>

2. CSS样式：

#container {
  height: 100vh; /* 设置容器高度为视口高度 */
  overflow: hidden; /* 隐藏溢出部分的内容 */
  display: flex; /* 设置子元素为 flex 布局 */
  flex-direction: column; /* 设置子元素垂直排列 */
}

#container > div {
  height: 100vh; /* 设置子元素高度为视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  font-weight: bold;
}

#content1 {
  background-color: #f00;
}

#content2 {
  background-color: #0f0;
}

#content3 {
  background-color: #00f;
}

3. JavaScript代码：

// 获取容器元素和子元素
const container = document.getElementById('container');
const contents = container.children;

// 设置当前显示的子元素索引
let currentContentIndex = 0;

// 监听鼠标滚动事件
container.addEventListener('wheel', (event) => {
  // 判断滚动方向（向上滚动为负数，向下滚动为正数）
  const direction = Math.sign(event.deltaY);

  // 根据滚动方向计算下一个子元素的索引
  const nextContentIndex = currentContentIndex - direction;
  
  // 如果下一个子元素存在，则切换到该子元素
  if (contents[nextContentIndex]) {
    currentContentIndex = nextContentIndex;
    container.scrollTo({
      top: contents[currentContentIndex].offsetTop,
      behavior: 'smooth'
    });
  }
  
  // 阻止默认滚动行为
  event.preventDefault();
});

以上示例中，我们使用了 `flex` 布局和 `100vh` 视口单位来实现子元素垂直排列并占满整个视口的效果。然后，我们监听了容器的 `wheel` 滚动事件，并根据滚动方向计算下一个子元素的索引，然后使用 `scrollTo()` 方法切换到该子元素。最后，我们阻止了默认的滚动行为，以避免页面滚动时出现抖动。