|
|
ToDo:
|
|
ɥozɐʞıɥ
2005-03-03 雛祭 [長年日記]
_ 雛祭
うちはバタバタしているので日曜日に開催。
_ [JavaScript]擬似的なフレイムでスクロールバーの同期化(IEのみ)
<html>
<head>
<title>scroll test</title>
</head>
<body>
<div id="head" style="overflow:hidden;width=250px;height=30px">
<table>
<tr>
<th>test01</th>
<th>test02</th>
<th>test03</th>
<th>test04</th>
<th>test05</th>
<th>test06</th>
<th>test07</th>
<th>test08</th>
<th>test09</th>
<th>test10</th>
<th>test11</th>
</tr>
</table>
</div>
<div id="detail" style="overflow:auto;width=266px;height=60px">
<table>
<tr style="background:red">
<td>test01</td>
<td>test02</td>
<td>test03</td>
<td>test04</td>
<td>test05</td>
<td>test06</td>
<td>test07</td>
<td>test08</td>
<td>test09</td>
<td>test10</td>
<td>test11</td>
</tr>
<tr style="background:yellow">
<td>test01</td>
<td>test02</td>
<td>test03</td>
<td>test04</td>
<td>test05</td>
<td>test06</td>
<td>test07</td>
<td>test08</td>
<td>test09</td>
<td>test10</td>
<td>test11</td>
</tr>
<tr style="background:green">
<td>test01</td>
<td>test02</td>
<td>test03</td>
<td>test04</td>
<td>test05</td>
<td>test06</td>
<td>test07</td>
<td>test08</td>
<td>test09</td>
<td>test10</td>
<td>test11</td>
</tr>
<tr style="background:cyan">
<td>test01</td>
<td>test02</td>
<td>test03</td>
<td>test04</td>
<td>test05</td>
<td>test06</td>
<td>test07</td>
<td>test08</td>
<td>test09</td>
<td>test10</td>
<td>test11</td>
</tr>
<tr style="background:red">
<td>test01</td>
<td>test02</td>
<td>test03</td>
<td>test04</td>
<td>test05</td>
<td>test06</td>
<td>test07</td>
<td>test08</td>
<td>test09</td>
<td>test10</td>
<td>test11</td>
</tr>
<tr>
<td>test01</td>
<td>test02</td>
<td>test03</td>
<td>test04</td>
<td>test05</td>
<td>test06</td>
<td>test07</td>
<td>test08</td>
<td>test09</td>
<td>test10</td>
<td>test11</td>
</tr>
<tr style="background:green">
<td>test01</td>
<td>test02</td>
<td>test03</td>
<td>test04</td>
<td>test05</td>
<td>test06</td>
<td>test07</td>
<td>test08</td>
<td>test09</td>
<td>test10</td>
<td>test11</td>
</tr>
</table>
</div>
<script type="text/javascript" language="JavaScript">
<!--
var head_obj = document.getElementById("head");
var detail_obj = document.getElementById("detail");
detail_obj.onscroll=scroll_test_detail;
function scroll_test_detail(){
head_obj.scrollLeft = detail_obj.scrollLeft;
head_obj.scrollTop = detail_obj.scrollTop;
}
-->
</script>
</body>
</html>
FRAMEの場合は、head_obj.scrollTo(0,detail_obj.scrollTop);なんかで出来るみたい。参考。
frames[0].eventでevent発生を判断するのカー。divの場合は…よーわからなかったので上記例ではdetailしか対応してなかったのです。
