垂直スクロールバーから水平スクロールコンテンツを使用する

Question

これは「ハック」とみなされるかもしれませんが、&の場合、垂直スクロールバー（マウスホイール）を使用してウェブサイトコンテンツを水平方向にスクロールする方法が考えられます。

は、基本的には、このサイトが何をするか：現在、私のサイト上でhttp://en.momentomultimedia.com/

を私は、水平スクロールバーを持っているし、スクロールするマウスホイールを使用しています。

これは私が現在（オーバーフロー-X/W：スクロール、オーバーフロー-Y：隠された）：マウスホイールを経由して水平に自分のサイトのスクロールを作るために使用するものである

$(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>