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
コメントする