プロが教えるわが家の防犯対策術!

スクロールバーの表示位置をテーブルの右側から、テーブルの左側に移したいのですが、単にdiv文をTableの前に持ってきても変更できません。

どのようにしたら左側に表示できるのでしょうか?

<div id="rowScroll" STYLE="overflow-y:scroll; height=280;width:100%">
<table border="1" CELLSPACING="0" class="tableSearch2" width="20%" align="left">
<tr class="tdListTitle">
<td width="24" align="center" nowrap>レ</td>
<td width="21" align="center">No</td>
<td width="195" align="center" nowrap>L5.資源名称</td>
<td width="60" align="center" nowrap>単位</td>
<td width="100" align="center" nowrap>投入数量/単価</td>
</tr>
</table>

「スクロールバーの表示位置を変えたい」の質問画像

A 回答 (2件)

JavaScriptではなくてHTMLの問題ですね。



<div dir="rtl" id="rowScroll" STYLE="overflow-y:scroll; height=280;width:100%">
<div dir="ltr">
<table border="1" CELLSPACING="0" class="tableSearch2" width="20%" align="left">
<tr class="tdListTitle">
<td width="24" align="center" nowrap>レ</td>
<td width="21" align="center">No</td>
<td width="195" align="center" nowrap>L5.資源名称</td>
<td width="60" align="center" nowrap>単位</td>
<td width="100" align="center" nowrap>投入数量/単価</td>
</tr>
</table>
</div></div>
    • good
    • 0
この回答へのお礼

ご教授ありがとうございました。

dir="rtl” で右側にから表示するためにスクロールバーが左に移り、
スクロールさせる部分は、左から右に表示させるということですね。

試してみてうまくいきました。
ありがとうございました。

お礼日時:2011/11/11 14:57

スクロールバーはブラウザの機能ですから、それをエミュレートする物を自作することになります。


JavaScriptカテゴリなのでわかってらっしゃると思いますが。。。


コンテンツを囲む部分にposition:relative、width、height、overflow:hiddenを指定しておいて、
コンテンツ部分にposition:absoluteを指定し、top、leftをスライドバーと連動させるか、
position:staticを指定し、clientTop、clientLeftを変更するように連動させてください。


感じとしてはこんな風ですが、CSSのleftを調整するだけで右スクロールバーも左スクロールバーも自由に配置できます。
http://home.wi-wi.jp/lab/00d/

スライダーのライブラリは自作の物ですが、
http://home.wi-wi.jp/software/js_slider/index.html
位置の取得が確実ではないようなので、
jQueryプラグイン、mootools、script aculousなどを使うのをお勧めします。
「jquery スライダー」などのキーワードで検索すると出てくると思います。

http://www.tvguide.or.jp/
TVガイドの番組表では、mootoolsかscript aculousを使われているようです。


http://www.hesido.com/web.php?page=customscrollbar
オリジナルのスクロールバーを作るライブラリもありました。
左側表示ができるかはわかりません。
    • good
    • 0
この回答へのお礼

さっそくのご教授ありがとうございます。

参考にさせていただきます。

お礼日時:2011/11/11 14:52

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています