html 滚动鼠标左右标签也切换

要实现滚动鼠标左右切换标签页的效果，可以通过以下步骤进行操作：

1. 在 HTML 文件中添加多个标签页，并为每个标签页设置唯一的 ID 值。
2. 使用 CSS 样式将所有标签页设置为水平排列，并将它们的容器设置为固定宽度和隐藏溢出（overflow:hidden）。
3. 使用 JavaScript 监听鼠标滚轮事件，并在事件触发时获取当前标签页容器的滚动位置。
4. 根据滚动位置计算要切换到的下一个标签页的位置，并将容器的滚动位置设置为该位置。

以下是一个示例代码，供参考：

HTML 代码：

<div class="tab-container">
  <div id="tab1" class="tab">标签页1</div>
  <div id="tab2" class="tab">标签页2</div>
  <div id="tab3" class="tab">标签页3</div>
</div>

CSS 样式：

.tab-container {
  width: 600px;
  overflow: hidden;
  white-space: nowrap;
}

.tab {
  display: inline-block;
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  background-color: #eee;
  border: 1px solid #ccc;
}

JavaScript 代码：

var container = document.querySelector('.tab-container');
var tabs = document.querySelectorAll('.tab');
var tabWidth = tabs[0].offsetWidth;
var currentIndex = 0;

container.addEventListener('wheel', function(event) {
  event.preventDefault();
  var delta = event.deltaX || event.deltaY;
  var scrollLeft = container.scrollLeft;
  var direction = delta > 0 ? 1 : -1;
  var newIndex = currentIndex + direction;
  if (newIndex < 0 || newIndex >= tabs.length) {
    return;
  }
  var newScrollLeft = newIndex * tabWidth;
  container.scrollLeft = newScrollLeft;
  currentIndex = newIndex;
});

在上面的代码中，我们首先获取了标签页容器和所有标签页的 DOM 元素，并计算了每个标签页的宽度。然后，我们使用 addEventListener() 方法监听了鼠标滚轮事件，并在事件触发时计算出要切换到的下一个标签页的位置，将容器的滚动位置设置为该位置，并更新当前标签页的索引。这样，当用户滚动鼠标时，就可以实现左右切换标签页的效果了。