2012.02.28 | mucho
最近やたら長いページが多くなってしかもパララックス効果とかあったりして
どうせなら滑らかにスクロールさせたいなーと思う今日この頃、
今夜は雪らしいですよ。こんにちはmuchoです。
というわけで、マウスホイールでのスクロールやスクロールバーをドラッグした時に
滑らかにスクロールするプラグインです。
smoothScrollerDemo
最初、ユーザーからのスクロール変更情報をキャプチャできないものかと画策したのですが、
mousewheelのイベントならともかく、onscrollイベントだと画面のスクロールそのものにかかってしまい、
ユーザーがスクロールバーを操作して発生したイベントかどうか判別できず断念。
そこで、
0.position:fixedをサポートしてるブラウザかチェック
1.コンテンツ全体を新規divでくるんでposition:fixedをかけて、
2.さらに空のdivタグでコンテンツ全体の高さを保持。
3.スクロールイベントでtop位置の変更をsetIntervalで回す。
BODYタグに背景画像を入れたり、
position:fixedのオブジェクトが他にあると
挙動がおかしくなるかもしれません。
使っていくうちにブラッシュアップできればと思います。
// コンテンツ全体を一つのオブジェクトに包んでプラグインを当てる $(document).ready(function () { $("#page").smoothScroller({fps:60,speed:0.1}); });
というわけでまだアルファ版ですがよろしければどうぞ。
jquery.smoothScroller.zip