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

コメントする