IT技術Labo - HouseTect

Javaフリーエンジニアとしての苦悩や、アーキテクトになるための努力の軌跡を掲載しています。.NETとJavaに力を入れた技術情報発信ブログです。

2つのテーブルのスクロール位置を動機する方法


2つのテーブルのスクロール位置を動機する方法
↑の画像のように、2個のテーブルがあり、右側のテーブルのスクロール位置と左側のテーブルのスクロール位置とを動機させるためのサンプルHTMLです。

考え方はいたって簡単で、右側のDIVタグの「onscroll」イベントでDIVタグのスクロール位置を左側のDIVタグのスクロール位置に設定するだけです。

以外と業務系のアプリなどで、全カラムを横スクロールしたくない場合があるので、この方法を知っていると有効かと思います。

詳細は続きで。



<html>
<body>
<table border="0" style="background-color:black;">
<tr>
<td valign="top" style="background-color:white">
<div id="leftColumn" style="overflow:hidden;height:84px;">
<table cellspacing="1">
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
</table>
</div>
</td>
<td style="background-color:white">
<div style="overflow:scroll;height:100;" onscroll="document.all.leftColumn.scrollTop=this.scrollTop;">
<table cellspacing="1">
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
<tr>
<td>
ああああああああああああ
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>


このようなHTMLを使えば簡単に実現できます。

是非上記HTMLをローカルにコピーして、見てみてください。


↓のボタンでこのブログの記事をランダムに表示します。

●Homeへ戻る●

COMMENT

Name
E-mail
URL
Comment
Pass  *
Secret？ （管理者にだけ表示）
pingツール無料プレゼント ＾＾

こんにちはyes-netsの新井と申します。　

　無料情報戦略支援yesnetworkでは

　IPC入会100人超えを記念して限定で

　アクセスアップツール　Ping一括送信　を

　プレゼントです。

　詳しくは　http://yesnet.blog82.fc2.com/　です。




応援クリック♪
  • yes-nets ipc@yes#-
  • URL
  • 2007.04.10(Tue)
  • Edit

　yes-netsの新井です。　

　色々と試行錯誤なさっている人がいるようです。

　無料情報戦略支援yesnetworkでは

　本当に使えるソフトの紹介もしています。

　毎月2〜3個のツールを開発しているメンバー

　ですのでQ
  • yes-nets ipc@yes#-
  • URL
  • 2007.04.10(Tue)
  • Edit

Pickup　Link！

COUNTER



RSSの登録はこちらからどうぞ。
RSS

ブログ内の検索

Google

カテゴリー

プロフィール

Hisasann

Author:Hisasann
かなり走り書きなブログで申し訳ないです。個人のメモ程度に使っていますが、よかったら参考にしてくださいね。メールまってま〜す。

相互リンク募集しています。 下記メアドまでメールください。
Rastaman@Mixi
Rastaman@コトノハ
Rastaman@テクノラティ

アクセスランキング

ブログパーツ

ブログランキング



ブロとも申請フォーム

この人とブロともになる