将垂直滚动更改为水平

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 涵盖了这种情况下的所有情况。

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/

Answer 3

如果有人使用 Chrome，这里是解决方案。星号选择器使其在 Chrome 上发挥作用，而 html 选择器也应该在 Firefox 上启用该功能。

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

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>

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
}