使用垂直滚动条水平滚动内容答案

【问题标题】：Use Vertical Scrollbar to Horizontal Scroll Content使用垂直滚动条水平滚动内容
【发布时间】：2017-12-25 00:17:40
【问题描述】：

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

这个网站基本上是做什么的：http://en.momentomultimedia.com/

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

这是我目前用来通过鼠标滚轮水平滚动网站的方法（w/overflow-x: scroll, overflow-y:hidden）：

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

});

【问题讨论】：

This 是我使用的。
这就是我正在使用的。但这取决于水平滚动条。我想使用垂直滚动条来水平滚动。这有点hacky。
他们的页面实际上是在一个固定的位置叠加，而他们将body的高度设为固定页面内容的宽度。因此，当您滚动页面时，它会停留在同一个位置，因为它是固定的。在滚动时，他们只需将left 设置为滚动的像素数量。任何一种方法都是一种 hack，并且有其自身的缺点。

标签： javascript jquery html css

【解决方案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>

【讨论】：

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