jQueryでマウスホイールで横にスクロールする横型コンテンツ

html+css

htmlはナビゲーションであるリストとコンテンツを入れるためのdivが５つあります。

html

 
	<div id="contents">
		<ul id="nav">
			<li><a href="#s01">01</a></li>
			<li><a href="#s02">02</a></li>
			<li><a href="#s03">03</a></li>
			<li><a href="#s04">04</a></li>
			<li><a href="#s05">05</a></li>
		</ul>
		<div id="s01" class="section">
			<h2>SECTION 01</h2>
			<p>1つ目のコンテンツ</p>
		</div>
		<div id="s02" class="section">
			<h2>SECTION 02</h2>
			<p>2つ目のコンテンツ</p>
		</div>
		<div id="s03" class="section">
			<h2>SECTION 03</h2>
			<p>3つ目のコンテンツ</p>
		</div>
		<div id="s04" class="section">
			<h2>SECTION 04</h2>
			<p>4つ目のコンテンツ</p>
		</div>
		<div id="s05" class="section">
			<h2>SECTION 05</h2>
			<p>5つ目のコンテンツ</p>
		</div>
	<!-- /#contents --></div>
	

div.sectionはfloatで横並びにしていますので、contentsのwidthにはsectionの合計を入れます。
cssで直接数値を入れてもいいですが、jsで値を取得した方が楽だと思います。

css

	#contents {
		overflow: hidden;
		padding: 60px;
	}
	div.section {
		width: 500px;
		background: #FFFFFF;
		padding: 20px;
		height: 400px;
		float: left;
		margin-right: 2px;
	}
	#nav {
		list-style: none;
		margin-bottom: 10px;
		position: fixed;
		left: 60px;
		top: 30px;
	}
	#nav li {
		display: inline;
		margin-right: 0.5em;
	}
	#nav li a {
		color: #fff;
	}
	

マウスホイールで横スクロール

マウスホイールは「MOUSE WHEEL EXTENSION」というjQueryプラグインを使用すると簡単に処理できます。
プラグインは以下からダウンロードできます。

MOUSE WHEEL EXTENSION

「mousewheel」はイベントとして扱います。
コールバックメソッドの第2引数でスクロール方向を取得します。
「return false」にすることで縦方向のスクロールを制限できます。

javascript

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
	<script type="text/javascript">
	$(function() {
		//コンテンツの横サイズ
		var cont = $('#contents');
		var contW = $('.section').outerWidth(true) * $('div',cont ).length;
		cont.css('width', contW);
		//スクロールスピード
		var speed = 50;
		//マウスホイールで横移動
		$('html').mousewheel(function(event, mov) {
			//ie firefox
			$(this).scrollLeft($(this).scrollLeft() - mov * speed);
			//webkit
			$('body').scrollLeft($('body').scrollLeft() - mov * speed);
			return false;	//縦スクロール不可
	    });
	});
	</script>
	

あとは取得した値を「scrollLeft」に入れてあげれば横スクロールの完成です。
ただie&firefoxでは「html」、chromeなどのwebkitでは「body」を指定しなくてはいけないので２つ記述しています。

ナビゲーションボタンをクリックで指定位置までスライド

次にナビゲーションボタンのクリックでスライドする機能を追加してみます。
idはすでに設定してありますので、あとはその位置までanimateで移動するだけですね。
mousewheelイベントの下に以下を追加します。

javascript

	$('#nav a').click(function(event) {
		var $anchor = $(this);
		$('html, body').stop().animate({
			scrollLeft: $($anchor.attr('href')).offset().left
		}, 500);
		event.preventDefault();
	});