html 上下滚动鼠标 左右标签页跟随

这个问题涉及到两个方面：HTML页面的滚动和标签页的切换跟随。我会分别回答这两个问题。

1. HTML页面的滚动跟随鼠标滚轮

要实现HTML页面的滚动跟随鼠标滚轮，可以通过JavaScript来监听鼠标滚轮事件，并且根据滚轮的方向来改变页面的滚动位置。具体的实现可以参考下面的代码：

window.addEventListener('wheel', function(e) {
  var delta = e.deltaY || e.detail || e.wheelDelta;
  var scrollDistance = 100; // 每次滚动的距离
  if (delta < 0) {
    window.scrollBy(0, -scrollDistance); // 向上滚动
  } else {
    window.scrollBy(0, scrollDistance); // 向下滚动
  }
});

在上面的代码中，我们通过`window.addEventListener`来监听`wheel`事件，然后根据滚轮的方向来调用`window.scrollBy`函数来改变页面的滚动位置。

2. 标签页的切换跟随鼠标左右滑动

要实现标签页的切换跟随鼠标左右滑动，可以通过JavaScript来监听鼠标左右滑动事件，并且根据滑动的方向来切换标签页。具体的实现可以参考下面的代码：

var tabs = document.querySelectorAll('.tab'); // 获取所有标签页元素
var activeTabIndex = 0; // 当前激活的标签页索引

window.addEventListener('mousedown', function(e) {
  var startX = e.clientX;
  window.addEventListener('mousemove', onMouseMove);
  window.addEventListener('mouseup', onMouseUp);
});

function onMouseMove(e) {
  var currentX = e.clientX;
  var direction = currentX < startX ? -1 : 1; // 判断鼠标滑动的方向

  // 切换标签页
  tabs[activeTabIndex].classList.remove('active');
  activeTabIndex = (activeTabIndex + direction + tabs.length) % tabs.length;
  tabs[activeTabIndex].classList.add('active');
}

function onMouseUp(e) {
  window.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('mouseup', onMouseUp);
}

在上面的代码中，我们通过`document.querySelectorAll`来获取所有的标签页元素，并且通过`activeTabIndex`变量来记录当前激活的标签页索引。然后我们监听`mousedown`事件来开始监听鼠标移动，然后在`mousemove`事件中判断鼠标滑动的方向，并且根据方向切换标签页。最后在`mouseup`事件中停止监听鼠标移动。同时，我们还需要为当前激活的标签页添加一个`active`类来标识它是当前激活的标签页。