使用垂直滾動條到水平滾動內容

Question

所以這可能被視為“黑客”，但我想知道是否以及如何使用垂直滾動條（帶鼠標滾輪）使網站內容水平滾動。

基本上這個網站是做什么的： 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>