html - 将垂直滚动更改为水平滚动

Question

这似乎已经被问过，但没有足够的答案。我完全不知道如何做到这一点(包括没有插件)。当我主动垂直向下滚动时，我希望我的网站水平滚动。

我的意思的一些例子: http://hotdot.pro/en/ 和 http://mashup.ikm.gda.pl/

明确地说，我不关心这两个网站使用的视差效果。我只想水平滚动。

谢谢!

Answer 1

这可以在原生 JavaScript 中解决，无需任何库。

示例代码

function transformScroll(event) {
  if (!event.deltaY) {
    return;
  }

  event.currentTarget.scrollLeft += event.deltaY + event.deltaX;
  event.preventDefault();
}

var element = document.scrollingElement || document.documentElement;
element.addEventListener('wheel', transformScroll);

说明

虽然此解决方案不依赖于任何库，但它也考虑了其他使用场景。例如，当在触摸板上滚动时，依赖于单个增量值的其他解决方案都会崩溃。

输入设备总是有多种滚动方式。笔记本电脑有触摸板，手机有触摸屏，鼠标有滚轮。最重要的是，您可以通过按住 shift 来修改滚轮的滚动方向。

在阻止默认行为时，我们还应该包括用户可以滚动的其他可能方向。幸运的是屏幕只有两个维度，因此将 deltaY 添加到 deltaX 涵盖了这种情况下的所有情况。