将垂直滚动条改为水平滚动条

Question

这似乎是以前问过但没有足够的答案。我完全不知道如何做到这一点（包括没有插件）。我希望我的网站在我垂直滚动时横向滚动。

以下是一些我所说的示例: http://hotdot.pro/en/和http://mashup.ikm.gda.pl/

清楚地说，我不关心这两个网站都使用的视差效果。我只想横向滚动。

谢谢！

- Andrew Weatherly

---

你有检查过你复制的第二个链接中的jquery.mousewheel.js文件吗？看起来它正在覆盖鼠标滚轮，并将垂直移动替换为水平移动。 - Alvaro Montoro

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可涵盖所有情况。

- Guido Bouman

---

如果您在Windows上使用Chrome的触摸板，这段代码将覆盖/禁用捏合功能，这对于阅读来说非常不方便。 - shioko

你可以从我的代码中删除 + event.deltaX 和 event.preventDefault() 部分。但这将导致垂直弹性滚动，这也不是你想要的。尽管如此，它确实有效。 - Guido Bouman

查看精简版演示，该版本不会阻止默认行为：https://codepen.io/guidobouman/pen/LYpPawd - Guido Bouman

尽管这是一个很好的解决方案，但它在iPad等触摸设备上无法使用。我认为没有办法绕过监听 touchmove 事件并将其 Y 值映射到水平滚动位置。 - kilian

Answer 2

尝试这个： 您需要添加一个指向 jQuery 的脚本引用，以及指向 鼠标滚轮插件 的脚本引用。 然后使用这段 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/

- JRulle

---

非常感谢您的回复！您能告诉我如何引用jQuery插件吗？我从未使用过jQuery或任何插件，所以不熟悉它。编辑：没关系，我想我已经弄明白了。 - Andrew Weatherly

我已添加脚本引用信息，请注意您需要自行托管mousewheel.js。 - JRulle

我需要为Firefox做些不同的事情吗？这似乎在Chrome上适用于我的网站，但在Firefox上却不行。 - Andrew Weatherly

请在Firefox上尝试此演示链接：link。如果可以，请尝试使用此JQuery版本：1.3.2。 - JRulle

我明白了。你必须将 $("body") 改为 $("html, body")。 - Andrew Weatherly

很高兴它对你有效 - Firefox在选择器方面可能有些挑剔。 - JRulle

Answer 3

如果有人在使用Chrome浏览器，这里是解决方案。星号选择器是使其在Chrome上正常工作的关键，而html选择器应该也能在Firefox上实现此功能。

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

- Tyler Brown

---

这不会将事件监听器绑定到页面上的每个元素吗？ - Dtipson

是的，不幸的是会这样。 - Guido Bouman

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>

- Jawad Ahbab

---

请注意，如果这种方法能够在更多的设备上很好地运行，那么它真的非常棒。所有苹果移动设备都被排除在外，以及相当数量的其他触摸设备。 - Maarten Venema

可以使用CSS检测用户设备的触摸功能，并切换到普通的水平滚动条来解决@Maarten提到的问题，但这需要太多的工作。更不用说由于我们正在使用变换，可能会出现模糊渲染的情况。 - Soroush Falahati

Answer 5

你不需要使用Javascript来实现这个，你可以只通过CSS来实现。

只需要按照例子来做就可以了。

.main-div{
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
}

.child.element{
    display: inline-block;
    min-width: 300px; //according to your need
    max-width: 300px; //according to your need
}

- Pawan Saini