使用垂直滚动条将内容水平滚动

Question

所以这可能被视为“hack”，但我想知道是否可能以及如何使用垂直滚动条（带鼠标滚轮）使网站内容水平滚动。

基本上，这个网站所做的就是：http://en.momentomultimedia.com/

目前在我的网站上，我有一个水平滚动条并使用鼠标滚轮滚动。

这是我目前使用的代码，通过鼠标滚轮使我的网站水平滚动（带有overflow-x: scroll，overflow-y:hidden）：

$(document).ready(function () {
$('#wrapper').on("mousewheel", function(e, delta) {
    this.scrollLeft -= (delta * 70);
    e.preventDefault();
});

});

- MrMachoman86

---

这个 是我使用的。 - user3483203

这是我正在使用的。但它依赖于水平滚动条。我想使用垂直滚动条来水平滚动。这有点繁琐。 - MrMachoman86

他们的页面实际上是一个固定位置的覆盖层，而将主体设置为固定页面内容的高度和宽度。因此，当您滚动页面时，它会保持在同一位置，因为它是固定的。在滚动时，他们只需将“left”设置为滚动的像素数。任何一种方法都是一种hack，并且都有其自身的缺点。 - René

Answer 1

所提到的页面有一个假的内容div #falsocontenido，其高度设置为真实内容的宽度。它隐藏在真实内容后面，真实内容的位置被设置为固定，因此它不会随着假div一起滚动。当你滚动页面时，负的实际滚动值被取出，真实内容的left被设置为该值。这就是整个逻辑。

这里是演示：

$(window).on('scroll', function() {
  $("#realcontent").css("left", -$(window).scrollTop());
});

#realcontent {
  background-color: #333;
  position: fixed;
  top: 5px;
  left: 0;
  width: 2000px;
  color: #fff;
  height: 100px
}

#fakecontent {
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="realcontent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam a est maiores fugiat nesciunt, at ad. Tempore odio velit ipsam, laborum explicabo repudiandae aliquid nostrum qui dolorem obcaecati, autem expedita!</div>
<div id="fakecontent"></div>

- valek

---

啊，我明白了。谢谢你的例子。 - MrMachoman86