特定の幅 (つまり 500 ピクセル) にサイズ設定された 2 つの div を用意します。一方をもう一方の上に水平に並べます。
上のボックスではスクロール バーを非表示にし、下のボックスにはスクロール バーを表示し、ユーザーがスクロールすると、上のボックスのオフセットが下のボックスの値に変更されるようにします。こうすることで、下の DIV が水平方向にスクロールすると、上の DIV も同時にスクロールしているように見えます。
プロセスが簡単になるのであれば、Jquery でこれを実行しても構いません。
ベストアンサー1
$('#bottom').on('scroll', function () {
$('#top').scrollTop($(this).scrollTop());
});
ここでは、スクロール バーのある要素から値を取得し、他の要素のスクロール位置を同期するように を.scrollTop()最大限に活用しています。scrollTopscrollTophttp://api.jquery.com/scrollTop
これは、一番下の要素の ID が でbottom、一番上の要素の ID が であると想定していますtop。
topCSS を使用して要素のスクロールバーを非表示にすることができます。
#top {
overflow : hidden;
}
デモはこちらです:http://jsfiddle.net/sgcer/1884/
実際にこれをやる理由はなかったと思いますが、実際にやってみるとかなりクールに見えます。