jQuery.flickScrollbar

更新 2013/04/09 ver 1.2.3
jQuery.flickSimple.js や jQuery.flickable.js に、iPhone風のスクロールバーがあれば良いのに・・・
と思って作ってみました!
合わせて使うとiPhone風のスクロールバーが付けられるjQueryです

※jQuery.flickScrollbar.js単独では使えないと思う・・


[ ver 1.2.0 の変更点 ] 2013/02/24
  • CSS Tansformに対応しました。
  • 位置の取得をoffsetからpositionに変更しました。
  • top, bottom, left, right, float のStyleを対象要素からコピーするように変更しました。
  • ver 1.0からのロジックを整理して一部を書き直しました。
  • refresh時に再計算する項目の見直しを行いました。
  • jquery.flickgal上での動作確認をしました。

[ ver 1.2.2 の変更点 ] 2013/03/28
  • fadeIn fadeOut をCSS animationを自動的に選択して実行するようにしました。
  • 要素の高さを子要素から自動取得できるようにしました。

[ ver 1.2.3 の変更点 ] 2013/04/09
  • touchEvent発生時のpropagation問題に対応しました。
使用例
$(selector).flickSimple( {
	vertical:true,
	horizontal:false,
	lock:true,
	onAnimationEnd: function() {
		$(selector).flickScrollbar('scrollstop');
	}
} );
$(selector).flickScrollbar( {
	vertical:true,
	horizontal:false
} );

$(selector).flickable();
$(selector).flickScrollbar( {
	vertical:false,
	horizontal:true,
	content: '.ui-flickable-content'
} );

$(selector).flickGal();
$(selector).flickScrollbar( {
	vertical: false,
	horizontal: true,
	content: '.containerInner'
});
					
jQuery.flickSimple や jQuery.flickable は下記からダウンロードしてください
すみません勝手にリンク張ってます m(_ _)m

jQuery.flickSimple での使用例(デモ)

※デモはmakogさんのサイトからコピペして使ってます... m(_ _)m

Basic

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
$('#basic').flickSimple({
	lock: true,
	onAnimationEnd: function() {
		$('#basic').flickScrollbar('scrollstop');
	}
});
$('#basic').flickScrollbar({
	vertical: false,
	horizontal: true,
});
						

Verticaly

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
$('#verticaly').flickSimple({
	vertical: true,
	horizontal: false,
	lock: true,
	onAnimationEnd: function() {
		$('#verticaly').flickScrollbar('scrollstop');
	}
});
$('#verticaly').flickScrollbar({
	vertical: true,
	horizontal: false
});
						

Verticaly (スクロールバー常時表示)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
#showWrapper div.ui-flickscrollbar-content-vertical {
	background-color: #333;
	padding: 4px !important;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
	box-shadow: inset 0 0 6px #ffffff,
	inset 0 0 6px #ffffff,
	inset 0 0 6px #ffffff,
	inset 0 0 6px #ffffff;
}

#showWrapper div.ui-flickscrollbar-slider-vertical {
	border:0 !important;
}
						
$('#show').flickSimple({
	vertical: true,
	horizontal: false,
	lock: true,
	onAnimationEnd: function() {
		$('#show').flickScrollbar('scrollstop');
	}
});
$('#show').flickScrollbar({
	id: 'showWrapper',
	vertical: true,
	horizontal: false,
	fade: false,
	size: 6,
	color: "#ff3300",
	opacity: 100
});
						

Both

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
$('#both').flickSimple({
	vertical: true,
	horizontal: true,
	lock: true,
	paginate: 'y',
	onAnimationEnd: function() {
		$('#both').flickScrollbar('scrollstop');
	}
});
var fs=$('#both').flickSimple();
$('#bothPrevBtn').click( function() {
	$('#both').flickScrollbar('watch', {visible:true} );
	fs.prevPage(1);
	return false;
});
$('#bothNextBtn').click( function() {
	$('#both').flickScrollbar('watch', {visible:true} );
	fs.nextPage(1);
	return false;
});

$('#both').flickScrollbar({
	vertical: true,
	horizontal: true,
	fadeIn:2000,
	fadeOut:2000
});
						

jQuery.flickable での使用例(デモ)

※デモはlagosさんのサイトからコピペして使ってます... m(_ _)m

Default

  • Content 1
  • Content 2
  • Content 3
  • Content 4
  • Content 5
  • Content 6
  • Content 7
$('#flickable1').flickable();
$('#flickable1').flickScrollbar( {
	content: '.ui-flickable-content',
	vertical: false,
	horizontal: true
});
						

Verticaly

  • Content 1
  • Content 2
  • Content 3
  • Content 4
  • Content 5
  • Content 6
$('#flickable3').flickable({
	section: 'li'
});
$('#flickable3').flickScrollbar({
	content: '.ui-flickable-content',
	vertical: true,
	horizontal: false
});
						

jQuery.flickgal での使用例(デモ)

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 7
  • item 8
  • item 9
  • item 10
$('#flickgal').flickGal();
$('#flickgal').flickScrollbar( {
	vertical: false,
	horizontal: true
});
						

簡易スクローラを制作しての使用例(デモ)

※画像は読み込みが完了していないと内部で正確にサイズを取得できない場合があります。

Sample

[テスト用簡易スクローラ] jquery.skeletonScroller.js
#view_contents {
	position: relative;
	height:200px;
	width:200px;
	overflow:hidden;
	margin:0;
	padding:0;
	border:solid 1px #cccccc;
	color:#ffffff;
	cursor: pointer;
}
						
<div id="view_contents">
  <img id="view" src="./img/CK001_L.jpg" />
</div>
						
$('#view_contents').skeletonScroller();
$('#view_contents').flickScrollbar( {
	content: '.containerInner',
	horizontal: true,
	vertical: true
});
						

jquery.flickScrollbarのダウンロード

ver 1.0 (非公開)初版
ver 1.0.1 (非公開)スタイルシートに対応
ver 1.0.2 (非公開)jQuery.flickable に対応
var 1.1.0 (2013/02/05)縦横のスクロールバーに対応 jQuery 1.7.2~1.9.0
ver 1.1.1 (2013/02/18)
対象要素にfloatが指定されていた場合にスクロールバーがずれる不具合に対応
ver 1.2.0 (2013/02/24)
  • CSS Tansformに対応しました。
  • 位置の取得をoffsetからpositionに変更しました。
  • top, bottom, left, right, float のStyleを対象要素からコピーするように変更しました。
  • ver 1.0からのロジックを整理して一部を書き直しました。
  • refresh時に再計算する項目の見直しを行いました。
  • jquery.flickgal上での動作確認をしました。
ver 1.2.1 (2013/03/18)IE9で動作しない不具合に対応
ver 1.2.2 β (2013/03/23)
ご指摘もあり、要素の高さを子要素から自動取得できるようにしました。
[sizeMethod]オプションが追加になりました。ご指摘いただきありがとうございました。
ver 1.2.2 (2013/03/28)
  • fadeIn fadeOut をCSS animationを自動的に選択して実行するようにしました。
  • 要素の高さを子要素から自動取得できるようにしました。
ver 1.2.3 (2013/04/09)touchEvent発生時のpropagation問題に対応しました。



おまけ(雛形にでもどうぞ!)

  • [テストに使った超簡易版スクローラ] jquery.skeletonScroller.js [バージョンアップの予定なし]

jquery.flickScrollbarの使い方

Options

プロパティ 省略値 説明
vertical true/false true 縦方向のスクロールバーを表示します
horizontal true/false true 横方向のスクロールバーを表示します
color CSSのカラーコード値 #000000(黒) スクロールバーの色
size ピクセル数 6ピクセル スクロールバーの太さ
border CSS border値 '1px solid #eee' ボーダーのスタイル・太さ・色
zindex 数字 1 重なりの順序(z-index)を指定
fade true/false true フェードイン、フェードアウト効果(falseにすると常に表示)
opacity 数字 0~100 50 スクロールバーの透過率(%)
radius 数字 0~1 0.7 角丸コーナの丸み
useCssTansform true/false true trueの時は自動設定します
スクロールバーの移動をCSS Tansformで行う場合はtrue
※fadeIn fadeOut も CSS animationで行うようになります。
id エレメント名 なし 対象のエレメントをラッピングするので、固有のidを付与したい時に使用します
content エレメント 内包している最初の子要素 動かすエレメントを指定します。
自動で取得できない場合のみ指定します。
jQuery.flickableの場合は「.ui-flickable-content」などを指定します。
fadein ミリ秒 100ms フェードイン効果の時間を指定します
fadeout ミリ秒 100ms フェードアウト効果の時間を指定します
interval ミリ秒 50ms スクロールバック(自動で基準位置まで戻る)の監視間隔
timeout ミリ秒 1000ms スクロールバック(自動で基準位置まで戻る)の監視処理のタイムアウト
watch ミリ秒 200ms スクロールバック(自動で基準位置まで戻る)の監視時間
sizeMethod parentまたはchildren parent 2013-03-23 New!
"parent"を指定すると親要素(対象のエレメント)からサイズを取得します。
"children"を指定すると子要素を集計してサイズを取得します。
省略値は"parent"です。

Events

scrollStart スクロールバーが移動を開始した時に発生するイベント
scrollStop スクロールバーが移動の終了処理を開始した時に発生するイベント
対象要素のスクロールバック監視処理を起動する時に発生します
processCompleted スクロールバーが移動を完了した時に発生するイベント
watchTimeout スクロールバック監視中にタイムアウトした時に発生するイベント

Methods

refresh 書式:$(selector).flickScrollbar('refresh');
関連要素の位置やサイズなどを再計算する。要素を更新した時に呼び出します。
内部要素に画像を取り込む場合は、画像の読み込みが完了してから呼び出さないと、サイズが正確に取得できない事があります。
watch 書式:$(selector).flickScrollbar('watch', visible);
引数: visible (true/false) 省略値 false
ページ移動などのリック操作を伴ない(イベントの発生しない)スクロール時に使用します。
visible を true にするとスクロールバーが表示されます。

例1:$(selector).flickScrollbar('watch');
例2:$(selector).flickScrollbar('watch', {visible: true});
enable 書式:$(selector).flickScrollbar('enable');
スクロール同期を有効化します。
内部処理などにより、何度もスクロールバーが勝手に動き回る場合に使用します。
disable 書式:$(selector).flickScrollbar('disable');
スクロール同期を無効化します。
内部処理などにより、何度もスクロールバーが勝手に動き回る場合に使用します。
show 書式:$(selector).flickScrollbar('show');
スクロールバーを表示します。
hide 書式:$(selector).flickScrollbar('hide');
スクロールバーを非表示にします。
destroy 書式:$(selector).flickScrollbar('destroy');
自動生成したオブジェクトを破棄し、対象エレメントを元の状態に戻します。
scrollstop 書式:$(selector).flickScrollbar('scrollstop');
スクロールバック(自動で基準位置まで戻る)が終了した時に使用します
jQuery.flickSimpleではonAnimationEndに指定します

onAnimationEnd: function() {
  $(selector).flickScrollbar('scrollstop');
}

※イベントを実行しても同じ効果が得られます。
$(selector).trigger('scrollstop');
option 書式: $(selector).flickScrollbar('option', key, value);
オプションを設定もしくは取得します。valueが省略されると値を取得します。

例1:$(selector).flickScrollbar('option', key);
例2:$(selector).flickScrollbar('option', { key1: value1, key2: value2 .... } );

マークアップ

※flickscrollbarは、CSSアニメーションが利用可能な環境の場合、自動的に下記のスタイルシートをヘダーに書き込みます。
<style type="text/css">
@-webkit-keyframes ui-flickscrollbar-fadeIn
	{0% {opacity: 0;} 100% {opacity: 1;}
}
@-webkit-keyframes ui-flickscrollbar-fadeOut
	{0% {opacity: 1;} 100% {opacity: 0;}
}
.ui-flickscrollbar-fadeIn {-webkit-animation: ui-flickscrollbar-fadeIn-8 100ms ease 0 1 normal;}
.ui-flickscrollbar-fadeOut{-webkit-animation: ui-flickscrollbar-fadeOut-8 100ms ease 0 1 normal;opacity: 0;}
</style>
					

※flickscrollbarは、対象の要素をラッピングして、自動的にこのようなマークアップを行います。
						
<div class="ui-flickscrollbar-wrapper">

	[ 対象の要素 (selector) ]

    <div class="ui-flickscrollbar-content-vertical">
      <div class="ui-flickscrollbar-slider-vertical"></div>
    </div>

    <div class="ui-flickscrollbar-content-horizontal">
      <div class="ui-flickscrollbar-slider-horizontal"></div>
    </div>
</div>
					

また、flickscrollbarは対象の要素のStyle属性を書き換えますので、動的にStyle属性を変更するようなページの場合は、要素をDIVタグ等で囲んでStyleを指定する事をお勧めします。
						
	<div style="margin-top:5px; float:left;">  ・・・ 囲んでStyle指定
		[ 対象の要素 (selector) ]
	</div>
					

ワンポイント

jQuery.flickScrollbarのページ