如何在网页中同时滚动垂直和水平鼠标滚轮？

Question

Out 网页有一个垂直滚动，直到它到达底部，此时我们希望它开始水平滚动。

它也应该反向工作，所以当用户到达水平滚动的末端时，用户可以使用鼠标滚轮返回顶部，遵循相同的路径。

为了更清楚，网页包装就像一个“L”。这与this 网站的动作相同，因为它得到：“我们已经承担了至少 300%”。

我已经看到了有关水平滚动的有用建议，但我无法将其实现到垂直滚动。

Answer 1

在正常情况下，我会以“你尝试了什么，展示东西”为主题，你绝对应该关注 Stack Overflow：How do I ask a good question?

也就是说，这是一个特别有趣的问题，所以我决定试一试。

我建议在点击“Run code sn-p”后以全页模式查看示例：

const root = document.getElementById('root');
const content = document.getElementById('content');

root.addEventListener('wheel', e => {
  e.preventDefault();
  e.stopPropagation();
  
  const delta = e.deltaY;
  
  const maxScrollY = content.offsetHeight - root.offsetHeight;
  const maxScrollX = content.offsetWidth - root.offsetWidth;
  
  let scrollY = root.scrollTop;
  let scrollX = root.scrollLeft;
  
  if (scrollX > 0) {
    scrollX += delta;
    
    if (scrollX < 0) {
      scrollY -= scrollX;
      scrollX = 0;
    }
  } else {
    scrollY += delta;
  
    const overflow = scrollY - maxScrollY;
    if (overflow > 0) {
      scrollX += overflow;
      scrollY = maxScrollY;
    } else {
      scrollX = 0;
    }
  }
  
  root.scrollTo(scrollX, scrollY);
});

#root {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

#content {
  width: 5000px;
  height: 1000px;
}

/* This is just to have something in content so we can see it moving */
#content {
  border: 50px solid #F00;
  background-image: 
    linear-gradient(0deg, rgba(0, 0, 255, .5) 0%, rgba(0, 0, 255, .5) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(90deg, #000 0%, #000 50%, #FFF 50%, #FFF 100%);
  background-repeat: repeat;
  background-size: 1% 5%;
}

<div id="root">
  <div id="content"></div>
</div>

此解决方案要求您有两个元素，一个外部“根”和一个内部“内容”。窗口应该是“根”元素（只需将其切换为const root = window;）。

基本上，我们然后劫持根元素上的wheel 事件。任何时候发生这种情况，我们都需要将其添加到scrollLeft 或scrollTop。

如果我们的scrollX/scrollLeft 是0，那么我们会将其添加到scrollY/scrollTop。然后，当我们到达底部时，我们检查是否有任何额外的滚动。如果有，我们会将其添加到scrollX。

如果我们的scrollX 不为零，那么我们将直接向其添加任何滚动。如果它变得小于零，我们会将其设置为零并将多余的部分提供给scrollY，以便它可以恢复。

由于deltaY 将是负数或正数，因此我们无需进行任何特殊的数学运算即可处理它。

对于 CSS，唯一重要的是 root 元素隐藏了 overflow。如果您使用的是窗口，请将html 设置为overflow: hidden。 “内容”然后需要有一些宽度。您不必明确设置它，因为您的内容会给它一个大小。