Question

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

这个网站基本上做了什么：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();
});

});

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>

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

1 个答案: