webページを作っている時、情報量が多くなるとどうしても縦にスクロールしなければならなくなる。
そんな時にある部分だけはスクロールした後も表示しておきたい時、
"フレームに分けてその部分だけは常に表示させておく"やり方や
"CSSのpositionプロパティをfixedにしておく"やり方があるが、
どちらも'なんだかなあ〜'という気がする。
特にIE6なんかはfixedをサポートしていなかったりするし。
というわけでJavascriptで要素をスクロールさせるスクリプトを書いてみた。
以下がソース
var ScrollObj = Class.create();
ScrollObj.prototype = {
initialize: function(elem, initstep, onDistance) {
if (elem.getStyle('position') == 'static') elem.setStyle({position: 'relative', top: 0, left: 0, zIndex: 1});
if (isNaN(parseInt(elem.getStyle('top')))) elem.setStyle({top: 0});
var initTop = elem.cumulativeOffset().top;
Event.observe(window, 'scroll', function(event) {
var f = arguments.callee;
var top = parseInt(elem.getStyle('top'));
Event.stopObserving(window, 'scroll', f);
var step = initstep;
if (document.viewport.getScrollOffsets().top < initTop && elem.cumulativeOffset().top == initTop) {
Event.observe(window, 'scroll', f);
return;
}
setTimeout(function() {
step++;
var scrollTop = document.viewport.getScrollOffsets().top - initTop;
if (document.viewport.getScrollOffsets().top < initTop) scrollTop -= (scrollTop + onDistance);
if (top < scrollTop) {
top += step;
var b = true;
} else {
top -= step;
var b = false;
}
elem.setStyle({top: top + 'px'});
if ((b && top < scrollTop) || (!b && top > scrollTop)) setTimeout(arguments.callee, 15);
else {
elem.setStyle({top: scrollTop + onDistance + 'px'});
Event.observe(window, 'scroll', f);
}
}, 500);
});
}
}
例によってprototype.jsを使っている。
最初、クラスを使って書こうと思い
var ScrollObj = Class.create();
としているが、出来てみたらただの関数でも全然良かった。
(このスクリプト内では一切thisを使っていないし、プロパティはコンストラクタしか無い)
IEでは'document.observe'でリスナー関数を設定する時に'scroll'イベントを認識しなかったりしたが、
Event.observe(window, 'scroll', function)
とすればうまくいった。
サンプルはここ
カテゴリ:
トラックバック(0)
トラックバックURL: http://blog.beanz-net.jp/beanz_mtos/mt-tb.cgi/43
コメントする