jQuery:実験-上下スクロール

前回のメニュースクロールを発展させて
コンテンツの上下スクロールをつくってみました。

構造はCSSでコンテンツのはみ出る部分をoverflow:hiddenで隠して、それをposition:absoluteさせてtopプロパティでY座標を指定する方法です。
ただし、この構造では、JAVAをきった状態だと隠れたコンテンツを見ることが不可能になってしまいます。
そのため、overflow:autoにして手動でコンテンツをスクロールできるようにする必要があります。
しかし、ここで問題発生。
手動でコンテンツをスクロールさせると、leftのデフォルト座標がずれてしまうんですね。
座標がずれると、メニューボタンとコンテンツの位置が合わなくなってしまいます。
そのため、javaScriptをきったときだけ、overflowプロパティをautoにして、スクロールバーを表示させるようにしてあります。

vScroll

上下スクロールサンプル

プラグインにしたものはこちらこのプラグインはwindowオブジェクトのscrollTop()を取得して目的のスクロールさせたいオブジェクトのtopに加算してます。
上下スクロールプラグインサンプル

Date : 2009/06/24 11:31

Posted by valley | | 編集/Edit

jQuery:ページ自体の上下スクロール

これまでは、BOX内のコンテンツをスクロールさせてましたが、今度はオーソドックスにページ自体をスクロールさせてみました。よくあるスクロールと違う点はIE6でもメニューをFIXさせている点です。^^

laboJQ_01


jQueryによるページスクロールIE6対応版

Date : 2009/09/11 23:23

Posted by valley | | 編集/Edit