jQueryでマウスホイールで横にスクロールする横型コンテンツ
Posted: 2011.07.21 / Category: javascript / Tag: jQuery, アニメーション
通常のWebサイトは縦長でマウスホイールで下に移動していきますが、最近よく見かけるようになった横長タイプのコンテンツをjQueryを使用して作成する方法をご紹介します。
機能としてはマウスホイールで横に移動と、ナビゲーションボタンをクリックで指定位置までスライドするということをやってみます。
Sponsored Link
html+css
htmlはナビゲーションであるリストとコンテンツを入れるためのdivが5つあります。
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」を指定しなくてはいけないので2つ記述しています。
ナビゲーションボタンをクリックで指定位置までスライド
次にナビゲーションボタンのクリックでスライドする機能を追加してみます。
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(); });
参考サイト
jQueryでマウスホイールのスクロールを検出する方法
Smooth Vertical or Horizontal Page Scrolling with jQuery
COMMENTS
Dai 2013-05-21 12:32
横スクロールのサイトを作成中なのですが、お聞きしたい事があります。
ナビゲーションボタンをクリックし、指定位置に移動する時に、
画面のセンターに指定位置が来るようにするにはどうしたらよいのでしょうか?
webOpixel 2013-05-26 18:57
「scrollLeft」の部分にウィンドウの半分足してみたらどうでしょう。
Shinta 2014-04-09 15:58
質問なのですが、他のプラグインと使用すると、こちらの縦スクロールが作動しなくなります。どうしたらいいでしょうか??
もし、原因などご存じであれば、教えていただけますと助かります。
ちなみに、縦スクロールはjQueryのバージョンでは最新では作動しないので、1.6.2で。
他のプラグインは最新の1.10.2を使い、noconflictで被るのを防いでいます。他のプラグインは問題なく作動するのですが、こちらの縦スクロールはどうも作動しません。よろしくお願いします。
webOpixel 2014-04-21 11:01
noconflict対策として下記のことはされてますか?
http://www.webopixel.net/wordpress/108.html
他プラグインの併用まではちょっとわからず、、、すみません。