jQuery　水平スクロール＆cssでカスタム可能なスクロールバーなプラグイン

水平スクロール＆cssでカスタム可能なスクロールバーなプラグイン

jQueryを使ったプラグインはその辺りにゴロゴロ落ちているので、
基本的に自作する事は無いのですが、たまに「アレ」と「コレ」を同時に使ったら
動かなくなったなんて事はよくある話で。。。

調べると、どちらもプラグインもノードの書き換えを行なっていて
ノードがめちゃくちゃな事にヽ(･ω･)/ｽﾞｺｰ

動作環境、jQueryバージョン

jquery-1.9.1
jquery.mousewheel 3.1.12
現行のFirefox、Chrome、IEでは動作確認してますが、
それ以外は反響があったら対応予定？です。

概要

・水平スクロール
・スクロールバーのカスタマイズ
の組み合わせです。

指定の領域にマウスが居る場合、スクロールを行うと水平に移動します。
横いっぱいにスクロールがされたら、下に下ります。
逆の場合は上にスクロールします。

後はスクロールバーのカスタマイズが可能な事と
ナビゲーションリンクが使用可能って事です。

説明より実際に触れたほうが良いのでこちらからどうぞ(；・∀・)

DEMO

・rc_horizontalScroll-2.0.1.zip
・39196byte
DOWNLOAD

レイアウト

クラス「cont-box」がひとつのボックスとなります。
ナビゲーション用のリンク設置はお好みで。

	

		

			
01
			
02
			
03
			
04
			
05
		

		

			

				

				
SECTION 01
				
1つ目のコンテンツ
				
				

				
SECTION 02
				
2つ目のコンテンツ
				
				

				
SECTION 03
				
3つ目のコンテンツ
				
				

				
SECTION 04
				
4つ目のコンテンツ
				
				

				
SECTION 05
				
5つ目のコンテンツ
				
			

		

	
		...略

スクロールバー

スクロールバーは色(color)、高さ(height)、丸み(radius)位の変更なら
耐えれると思います。

・hsTrack
スクロールバーの背景

・hsFace
スクロールバーの四角いやつ

.hsTrack {
    background: none repeat scroll 0 0 #eee;
    width: 100%;
}
.hsFace {
    background: none repeat scroll 0 0 #ccc;
    height: 8px;
    position:relative;
    cursor: pointer;
}

jQUery説明

・animation
スライドの時間を調整出来ます。
defult:500

・navGroup
指定されたクラスの直下の要素に対してパネルのリンクを生成します。
サンプル通りのHTMLで組めばおそらく問題は有りませんが、変更した
場合は動作対象外です。
リンクを設置しない場合は消して下さい。

・scroll
スクロールを追加するかどうか。
falseを指定すると出なくなります。
defule:true

	$(function(){
		$('.cont-out').horizontalScroll({
			animation:300,
			navGroup:'.nav',
			scroll:true
		});
	});

イベント処理にbindを使用したり、DOMアクセスの効率悪いとか
突っ込みどころ満載ですがご愛嬌ということで。。。(；´∀｀)