Tags

Recent Entries

Recent Comments

Recent Trackback

Feeds

More Links


タグ:「css」の記事一覧

スクロールバーを左に。

[Permalink] [Post to del.icio.us] [Post to hatena] [Post to livedoorClip]
デザインをLDRっぽくフレーム風にしました。一応ブラウザサイズによって可変するような感じです。
で左のツリー部分のスクロールバーが左側に表示されてたのを見て、「見やすいよなぁコレ」とか思っていたんですが、やり方とかは特に気にしてませんでした。
てっきりJavascriptで裏技的にやってるのかと思いきや、CSSで簡単にできるんですね。
<div id="side"><div class="container">
~リスト~
</div></div>

最近の流行りだと、こんな感じでサイド部分を作ると思うんですが、普通に「overflow:scroll」させると当然右側にスクロールバーが表示されます。そこで、
#side {
width: 200px;
height: 800px;
overflow: auto;
overflow-y: scroll;
direction: rtl;
}
#side .container {
padding: 5px;
direction: ltr;
}

とすると、スクロールバーは左側になります。実におしゃれ。
「#side」には文章の方向を「RightToLeft(右から左)」にしスクロールバーの表示を逆転させて、コンテナ部分は通常通り「LeftToRight(左から右)」に戻す。頭良いコレ。
Posted by: simpraight at 2006/11/20 18:58:52 | Tags: [css] [tips] | Comments:1 | Trackbacks:0