将垂直滚动更改为水平

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键来修改滚轮的滚动方向。

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

Answer 2

如果有人在使用Chrome，那么这就解决了这个问题。星号选择器使其适用于Chrome，而html选择器也应启用Firefox上的功能。

$(function() {
    $("html, body, *").mousewheel(function(event, delta) {
        this.scrollLeft -= (delta * 50);
        event.preventDefault();
    });
});

Answer 3

试试这个： 您需要向jquery和mouse wheel plugin添加脚本引用。 然后使用这个JS：

$(function() {
   $("body").mousewheel(function(evt, chg) {
      this.scrollLeft -= (chg * 50); //need a value to speed up the change
      evt.preventDefault();
   });
});

脚本参考：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/jquery.mousewheel.js"></script>

你可以直接使用第一个，jquery脚本，因为它是一个公共存储库，但第二个，mousewheel.js将要求你将.js文件保存在服务器的某个地方并提供一个链接到它（类似于您为src属性中的图片提供链接的方式）。

插件：https://github.com/brandonaaron/jquery-mousewheel

参考：http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

Answer 4

纯CSS解决方案

您不需要Javascript
有关更多信息：https://css-tricks.com/pure-css-horizontal-scrolling/

::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}

::-webkit-scrollbar-button {
  width: 1px;
  height: 1px;
}

body {
  background: #111;
}

div {
  box-sizing: border-box;
}

.horizontal-scroll-wrapper {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: calc(250px + 1px);
  max-height: 750px;
  margin: 0;
  padding-top: 1px;
  background: #abc;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-transform: rotate(-90deg) translateY(-250px);
          transform: rotate(-90deg) translateY(-250px);
  -webkit-transform-origin: right top;
          transform-origin: right top;
}
.horizontal-scroll-wrapper > div {
  display: block;
  padding: 5px;
  background: #cab;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

.squares {
  padding: 250px 0 0 0;
}
.squares > div {
  width: 250px;
  height: 250px;
  margin: 10px 0;
}

<div class="horizontal-scroll-wrapper squares">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>