トラブル克服&実験レポート / WebDevelopment  [WEB制作の正しい作法]  

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

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

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

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