maaash.jp

what I create

ブロック要素の中で滑らかスクロールする方法(javascript)2

昨日の ブロック要素の中で滑らかスクロールする方法(javascript) はつくってて楽しかった♪
Flashアプリとかつくる人にとっては当たり前な気がしますが。

usage:
http://slightlyblue.com/lab/t20060827/smoothscroll.js を読み込んで、
SmoothScroll.scrollTo( ‘target id’, ‘parent id’, options);
‘parent id’ はスクロールしようとしているブロック要素のid
‘target id’ は ‘parent id’ブロック内にあるスクロール目標(=スクロール後にブロックの一番上に表示させたい行)のid
options は { time : 500, unit : 50 } 等と指定する
options.time は スクロール完了までの時間
options.unit は スクロール完了までに何ms単位で細かくスクロールするか
映画のフレームレート:24fps(40ms/frame)が映像を滑らかに見せるぎりぎりのラインだと思うので、それくらいを目安に。

point1:
滑らかなスクロールは、
$(‘parent id’).scrollTop を options.unit 毎に更新することで実現します。
更新毎の移動量は、線形に漸減する方式になっています。

目標の距離に対して、options.time / options.unit 回に分けてスクロールするので、
目標の距離 / ( options.time / options.unit ) だけ一度に動かすと、速度変化は起きません。

線形に漸減させるためには、
一回の移動量 = 目標の距離 / ( options.time / options.unit ) * 2
x2すればいいのです。
この三角形を意識すれば簡単。

4分の1円形状に速度が落ちていったらかっこいいかな、なんて考えたりすると楽しい。。

point2:
もうひとつのポイントは、IE/Firefoxの違い
MSDN Home > 連載コラム > DHTML Dude > 配置と編集
HTML要素のサイズや位置を取得する
この辺りが詳しい。
offsetTopを使って、スクロールの目標を決めているのだけれど、
offsetTopがどこ基準のオフセットなのか、ブラウザ依存。
ここでは、’parent id’のwidth,heightを絶対値指定して、’parent id’ブロックをその内側にある’target id’のoffsetParentにしている。

もし万が一使うことがありそうだったらコメントいただけたらうれしいです。

Comments