疑似的フレーム

擬似的フレームとは このページもそうですが、左や右にナビゲーションリンクを配置する事が多いと思いますが、昔はフレームを使ってそれぞれ個別にスクロールさせてたような？ということで、この動作を再現させるこころみです。

position: fixed バグ対応

実は、position: fixed(表示位置固定)を使うことで、Firefoxは簡単に対応できたのですが、IE6でみるとバグのせいで表示が崩れてしまっていました。

したのサンプルではその為に色々まどろっこしいことをやっていますが、そのためです。

サンプル

<style type="text/css">
body{
    margin: 0;
    overflow: hidden;
}
#left{
    overflow: auto;
    position: absolute; top: 0; left: 0;
    width: 20%;
    height: 100%;
}
#right{
    overflow: auto;
    position: absolute; top: 0; left: 20%;
    width: 80%;
    height: 100%;
}
</style>

<div id="left">
左枠
</div>
<div id="right">
右枠
</div>

このサンプルを表示

サンプルをみると、スクロールバーを動かしても左枠がつられてうごいていないのがわかると思います。

ポイント

body{ overflow: hidden; }とすることでスクロールバーを消しつつ、それぞれのdivにスクロールバーをつける為に、overflow: auto;を指定してます。divの配置については、position: absolute; top: XX; left: XX;として絶対位置指定を行うようにしています。

postion: fixed;(位置を固定)すると簡単にできそうですが、IE6のバグでうまくうごかないので、このような対応になっています。

JavaScriptをつかってフレームの配置を操作

カラムが2個のフレームの場合4通りの配置の方法があるので、これをJavaScriptを使>って動的に配置します。あまりニーズがあるような気がしませんが、ユーザーがリアルタ イムで配置を変更できるようになったりします。

サンプル

JavaScriptでstyle.top, style.left, style.width, style.heightを変更することによって実現します。

var left = document.getElementById('left');
left.style.top=0;
left.style.left=0;
left.style.width='20%';
left.style.height='100%';

var left = document.getElementById('right');
right.style.top=0;
right.style.left='20%';
right.style.width='80%';
right.style.height='100%';

このサンプルを表示

どうでしょう？クリックすると配置がかわるのがわかると思います。

ポイント

JavaScriptでスタイルを操作できると言うところです。