埋め込み
常に最新
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/scroller.min.js" ></script>
1.0.2
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/scroller.1.0.2.min.js" ></script>
1.0.1
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/scroller.1.0.1.min.js" ></script>
1.0.0
<script type="text/javascript" src="http://nolib.kikisoftware.com/js/arc/scroller.1.0.0.min.js" ></script>
必要なライブラリ
概要
Scrollerはiframeやoverflowを使わずにコンテンツの一部をスクロールさせることで、自由なスタイルのスクロールバーを使えるようにします。
スワイプやマウスホイールはもちろん、スワイプのようなイメージでマウスのドラッグ操作でもスクロールさせることができます。
投げるような動作をしたときの動きを細かく指定することができます。また、スクロール上端、下端に達したときに一度行き過ぎてから戻るような効果も追加することができます。
上端、下端にそれぞれ達したとき、スクロールが止まったとき、スクロール位置が変わったとき、マウスホイールでスクロールさせたときにそれぞれのイベントハンドラを登録することができます。
古いAndroidはそもそもフォーム入力(特にテキスト)が不安定なため、Scrollerのようにスワイプ動作を拾って場所を移動させるような効果を追加すると、ユーザーの思うような操作を邪魔する可能性が出てしまいます。Scroller内部にテキスト入力フォームを記述する場合は、対象端末や目的を考えて導入すべきか検討してください。
Scroller内部のスワイプ処理ではpreventDefaultを呼び出してのデフォルトイベントキャンセルはあえて行っていません。必要に応じて個別に設定するようにしてください。ただしスクロールバーはhandlemodeに関わらずmouse, touch両方のイベントで処理を行い、mouse, touchstartでpreventDefaultを行っています。
Scrollerを使ったスクロールは端末のスクロール機能と比べてアニメーションのスムーズさで劣ります。導入の際にはユーザビリティについてよく検討してから使用してください。
- 1.0.2
- deprecate対応
- 1.0.1
- 各コールバック関数内からthis指定でscrollerオブジェクトを取得することができます。
サンプル
一般的な部分スクロールとクリッカブルパーツ
<div id="samp1v" > <div id="samp1c" class="container"> <div > <a href="./" >ハイパーリンク。ホームへ</a> </div> <div > <a href="javascript:dispMessage($('#console'), 'href!', 500, 1000);" onclick="dispMessage($('#console'), 'アンカークリック', 500, 1000);"> アンカーのクリックハンドラ</a> </div> <div > <div class="clickablediv" onclick="dispMessage($('#console'), 'divクリック', 500, 1000);"> divのクリックハンドラ</div> </div> <div > <button type="button" onclick="dispMessage($('#console'), 'ボタンクリック', 500, 1000);"> ボタン</button> </div> <div > <input type="text" name="txt" /> </div> <div > <input type="checkbox" name="chk" /> </div> <div > <label><input type="radio" name="rd" />一番目</label><br/> <label><input type="radio" name="rd" />二番目</label><br/> <label><input type="radio" name="rd" />三番目</label><br/> </div> <div > <textarea name="tarea"></textarea> </div> <div> <input type="submit" value="このページへ送信" /> </div> </div> <div id="console" ></div> </div> <div id="stat"></div>
#console{ position: absolute; background-color: rgba(0,0,0,0.8); color: #FFFFFF; width: 320px; height: 40px; padding: 12px 0 0 5px; left: 100px; top: 30px; box-shadow 0 0 1px 1px #BBBBBB; font-size: 20px; text-align: center; display: none; z-index: 5; -webkit-border-radius : 12px; -moz-border-radius : 12px; -o-border-radius : 12px; -ms-border-radius : 12px; border-radius : 12px; } #samp1v{ width: 500px; height: 200px; margin: 10px 0 10px 0; border: solid 1px #000000; background-color: #FFFFFF; -webkit-border-radius : 6px; -moz-border-radius : 6px; -o-border-radius : 6px; -ms-border-radius : 6px; border-radius : 6px; } #samp1c{ padding: 10px 10px 10px 10px; font-size: 16px; } .container > div{ padding: 10px 0 10px 20px; } .clickablediv{ width: 250px; padding: 5px 0 3px 0; text-align: center; background-color: #EEEEEE; box-shadow: 0 0 1px 1px #666666; -webkit-border-radius : 12px; -moz-border-radius : 12px; -o-border-radius : 12px; -ms-border-radius : 12px; border-radius : 12px; } .container input[type=text],.container textarea{ padding: 3px 3px 3px 2px; width: 400px; font-size: 14px; } .container input[type=radio]{ height: 30px; } .container input[type=submit], .container input[type=button], .container button{ padding: 5px 5px 3px 5px; font-size: 14px; } .bar{ width:6px; position:absolute; right:2px; background-color:#DDDDDD; cursor:pointer; box-shadow: 0px 0px 1px 1px rgba(180,180,180,1); -webkit-border-radius : 2px; -moz-border-radius : 2px; -o-border-radius : 2px; -ms-border-radius : 2px; border-radius : 2px; } #stat{ float: left; width: 278px; margin: 10px 0 0 20px; }
//以下をscriptのjqueryロード後の処理に記述します var samp1 = new Scroller({ id:'samp1v', cntid:'samp1c', barclass: 'bar', stopborder: false, framerate: 60}); samp1.setBar(); samp1.setOnMove(function(nw, cntnsize, viewsize){ $('#stat').html('viewHeight: '+viewsize+'<br/>containerOuterHeight: '+cntnsize+'<br/>top: '+nw); }); $('#samp1c').on('touchmove', function(evt){ evt.preventDefault(); });
//以下の関数をscriptタグ内に記述します function dispMessage(tgt, msg, duration, spd){ tgt.html(msg); tgt.fadeIn(100, function(){ setTimeout(function(){ tgt.fadeOut(spd); }, duration); }); }
設定
- 未指定:必須条件:文字列id
- Scrollerを構成する要素のうち、viewに設定する要素のid属性値を指定します。idのない要素をScrollerのviewにすることはできません。
- 未指定:必須条件:文字列cntid
- Scrollerを構成する要素のうち、containerに設定する要素のid属性値を指定します。idのない要素をScrollerのcontainerにすることはできません。
- 未指定:300条件:px/秒単位の0より上の数値speed
- 自動スクロール時の速さを指定します。限界以上にスクロールさせた後の戻りの速さや、デフォルト時のscrollTop(), scrollBottom()のアニメーションスピードになります。
- 未指定:0条件:0->top 1->translate3dusetranslate
- containerの位置指定に使用するスタイル要素を指定します。0はtopを使った絶対位置指定、1を指定するとtranslate3dを使った指定になります。translate3dを使うと一部の端末で動きが滑らかになりますが、Androidでフォーカスとのずれが生じてクリックやテキスト入力ができなくなる場合もありますので使用する際は注意してください。
- 未指定:40.0条件:px/秒^2単位の0以上の数値friction
- 慣性動作時に1秒間あたりに減少させるスクロールスピードを指定します。
- 未指定:200条件:ミリ秒単位の0以上の数値freetime
- 慣性動作時に指定したミリ秒間、減速されずにスクロールスピードが減速されません。
- 未指定:40条件:0より上の整数framerate
- 1秒間にスクロール移動するコマ数を指定します。この設定はスワイプ中ではなく慣性動作(スワイプで投げるような動作)時に適用されます。
- 未指定:true条件:true|falsestopborder
- falseに設定するとスワイプ操作で限界を超えてスクロールした後、限界点まで戻る効果を入れることができます。
- 未指定:40条件:0より上の整数onwheelrange
- 一回のマウスホイールの回転でスクロールする量をピクセル単位で指定します。
- 未指定:2条件:0->全て 1->マウス 2->タッチ 9->なしhandlemode
- スクロールさせる方法を決定します。これが0の状態だとマウスとタッチ両方のイベントを拾って動作します。9に設定するとドラッグやスワイプで動かなくなります。
- 未指定:デフォルトスタイルがスクロールバーにセットされる条件:文字列barclass
- スクロールバーの見た目を記述したスタイルを持つclass名を指定します。未指定時は以下のスタイルがスクロールバーに当たります。
{ width:3px; position:absolute; right:2px; background-color:#DDDDDD; cursor:pointer; box-shadow: 0px 0px 1px 1px rgba(180,180,180,1); -webkit-border-radius : 2px; -moz-border-radius : 2px; -o-border-radius : 2px; -ms-border-radius : 2px; border-radius : 2px; }
- 未指定:true条件:true|falseautotranslatemode
- Scrollerではusetranslateを1にしてもそのままではブラウザが「Android 3.x以下」「iPhone OS 4」「Opera」「IE」であった場合自動的に0に設定しなおします。autotranslatemodeをfalseに指定しておくとこの自動置き換え機能を抑制し、どのブラウザであってもtranslate3dで位置指定するようになります。ただし問題のある端末を抑制していますので、falseに設定する場合は十分に注意してください。
- 未指定:true条件:true|falseautoadjustwidth
- Scrollerではcontainerをabsolute指定するため、横幅を指定する必要があります。この設定がtrueだと自動的に「width: 100%」を指定します。
- 未指定:null条件:以下の形式の関数 function(){}issetbar
- Scrollerでは画面にresizeがかかると自動的にスクロールバーの再計算を行いますが、ここで指定した関数がfalseを返した場合その再計算を行いません。
- 未指定:-条件:-setOnBottom(function(){})
- 引数にコールバック関数を指定することで、スクロールが最も下に達した時点で実行される処理を記述することができます。
- 未指定:-条件:-setOnTop(function(){})
- 引数にコールバック関数を指定することで、スクロールが最も上に達した時点で実行される処理を記述することができます。
- 未指定:-条件:-setOnStop(function(){})
- 引数にコールバック関数を指定することで、スクロールが終了した時点で実行される処理を記述することができます。
- 未指定:-条件:-setOnMove(function(nw, cntnsize, viewsize){})
- 引数にコールバック関数を指定することで、スクロール位置が変わりたびに実行される処理を記述することができます。引数はそれぞれnw: 現在のcontainerのtop(translate3dならy座標)の値、cntnsize: containerの高さ、viewsize: viewの高さ
- 未指定:-条件:-setBar()
- スクロールバーの大きさや位置を再計算します。初期表示の時にそのままだとスクロールバーが表示されません。この関数を呼び出すと表示されます。
- 未指定:-条件:-setViewHeightFunction(function(){})
- 画面リサイズ時にviewの高さを再設定したい時に使用します。内部的にはresizeイベントのコールバックになっているだけですので、引数で渡した関数の中でviewの高さを直接設定してください。
- 未指定:-条件:-scrollTop(speed)
-
scroller内部を一番上の位置までスクロールさせます。speed(px/秒)を指定することでアニメーションスピードを指定することができます。右のテキストボックスのスピードでscrollTopします
- 未指定:-条件:-scrollBottom(speed)
- scroller内部を一番下の位置までスクロールさせます。speed(px/秒)を指定することでアニメーションスピードを指定することができます。