Skip to content

Instantly share code, notes, and snippets.

@pocari

pocari/scroll template

Created April 14, 2014 13:19
Show Gist options
  • Save pocari/10647108 to your computer and use it in GitHub Desktop.
Save pocari/10647108 to your computer and use it in GitHub Desktop.
Download ZIP
scroll template
Raw
scroll template
<html>
<head>
<script>
function $id(id) {
return document.getElementById(id);
}
function test(){
alert($id("top_label").style.width);
alert($id("left_label").style.height);
}
function xscroll(top_header, left_header, contents, width, height) {
xyscroll_base(top_header, left_header, contents, width, height,
0, 16, "x_scroll_contents");
}
function yscroll(top_header, left_header, contents, width, height) {
xyscroll_base(top_header, left_header, contents, width, height,
16, 0, "y_scroll_contents");
}
function xyscroll(top_header, left_header, contents, width, height) {
xyscroll_base(top_header, left_header, contents, width, height,
16, 16, "xy_scroll_contents");
}
function xyscroll_base(top_header, left_header, contents, width,
height, xoffset, yoffset, contents_class) {
$id(contents).style.width = width;
$id(contents).style.height = height;
$id(contents).className = contents_class;
$id(top_header).style.width = width - xoffset;
$id(left_header).style.height = height - yoffset;
$id(contents).onscroll = function () {
$id(top_header).scrollLeft = $id(contents).scrollLeft;
$id(left_header).scrollTop = $id(contents).scrollTop;
}
}
</script>
<style type="text/css">
.scroll_left_label {
overflow:hidden;
}
.scroll_top_label {
overflow:hidden;
}
.y_scroll_contents {
overflow-y:scroll;
overflow-x:hidden;
}
.x_scroll_contents {
overflow-y:hidden;
overflow-x:scroll;
}
.xy_scroll_contents {
overflow-x:scroll;
overflow-y:scroll;
}
table.layout {
border-width:0;
border-style:solid;
border-collapse:collapse;
border-spacing:0px;
}
table.layout td {
border-width:0px;
border-style:solid;
border-collapse: collapse;
border-spacing: 0px;
}
table.grid {
border: 0px;
border-color:black;
border-style:solid;
border-collapse: collapse;
border-spacing: 0px;
}
table.grid td {
font-size:9pt;
white-space:nowrap;
border-color:black;
border-width:1px;
border-style:solid;
border-collapse: collapse;
border-spacing: 0px;
white-space: nowrap;
}
table.grid tr.header {
background-color:#afeeee;
}
}
</style>
</head>
<body>
<input type="button" value="チェック" onclick="test()" />
<!--
スクロール用にそれぞれの部分を保持するための、2ｘ2の外枠テーブルを作成する。
＋－－－－－－－－－－－－－－－－－－－－－－－－－－－－－＋
｜固定ヘッダ用テーブル　　　　｜横可変ヘッダ用テーブル　　　｜
＋－－－－－－－－－－－－－－＋－－－－－－－－－－－－－－＋
｜縦可変ヘッダ用テーブル　　　｜データ用テーブル　　　　　　｜
＋－－－－－－－－－－－－－－＋－－－－－－－－－－－－－－＋
-->
<table cellpadding="0" class="layout">
<tr>
<!--
固定ヘッダ部分
＋－－－－－－－－－－－－－－－－－－－－－－－－－－－－－＋
｜固定ヘッダ用テーブル　　　　｜　　　　　　　　　　　　　　｜
＋－－－－－－－－－－－－－－＋－－－－－－－－－－－－－－＋
｜　　　　　　　　　　　　　　｜　　　　　　　　　　　　　　｜
＋－－－－－－－－－－－－－－＋－－－－－－－－－－－－－－＋
固定ヘッダ部分のtableには特にclassの指定無し
-->
<td valign="top" halign="left">
<table class="grid">
<tr class="header">
<td nowrap width="100">固定ヘッダ１</td>
<td nowrap width="100">固定ヘッダ２</td>
</tr>
</table>
</td>
<td valign="top" halign="left">
<!--
＋－－－－－－－－－－－－－－－－－－－－－－－－－－－－－＋
｜　　　　　　　　　　　　　　｜横可変ヘッダ用テーブル　　　｜
＋－－－－－－－－－－－－－－＋－－－－－－－－－－－－－－＋
｜　　　　　　　　　　　　　　｜　　　　　　　　　　　　　　｜
＋－－－－－－－－－－－－－－＋－－－－－－－－－－－－－－＋
横可変ヘッダ用テーブルはclass="scroll_top_label"を指定し、javascriptに渡すための、idを任意で設定する(ここではtop_label)
-->
<div class="scroll_top_label" id="top_label">
<table class="grid">
<tr class="header">
<td nowrap width="150">可変ヘッダ１</td>
<td nowrap width="150">可変ヘッダ２</td>
<td nowrap width="150">可変ヘッダ３</td>
<td nowrap width="150">可変ヘッダ４</td>
<td nowrap width="150">可変ヘッダ５</td>
<td nowrap width="150">可変ヘッダ６</td>
<td nowrap width="150">可変ヘッダ７</td>
<td nowrap width="150">可変ヘッダ８</td>
<td nowrap width="150">可変ヘッダ９</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<!--
＋－－－－－－－－－－－－－－－－－－－－－－－－－－－－－＋
｜　　　　　　　　　　　　　　｜　　　　　　　　　　　　　　｜
＋－－－－－－－－－－－－－－＋－－－－－－－－－－－－－－＋
｜縦可変ヘッダ用テーブル　　　｜　　　　　　　　　　　　　　｜
＋－－－－－－－－－－－－－－＋－－－－－－－－－－－－－－＋
縦可変ヘッダ用テーブルはclass="scroll_left_label"を指定し、javascriptに渡すための、idを任意で設定する(ここではleft_label)
-->
<td valign="top" halign="left">
<div class="scroll_left_label" id="left_label">
<table class="grid">
<tr class="header">
<td nowrap width="100">項目１－１</td>
<td nowrap width="100">項目１－２</td>
</tr>
<tr class="header">
<td>項目２－１</td>
<td>項目２－２</td>
</tr>
<tr class="header">
<td>項目３－１</td>
<td>項目３－２</td>
</tr>
<tr class="header">
<td>項目４－１</td>
<td>項目４－２</td>
</tr>
<tr class="header">
<td>項目５－１</td>
<td>項目５－２</td>
</tr>
<tr class="header">
<td>項目６－１</td>
<td>項目６－２</td>
</tr>
<tr class="header">
<td>項目７－１</td>
<td>項目７－２</td>
</tr>
<tr class="header">
<td>項目８－１</td>
<td>項目８－２</td>
</tr>
<tr class="header">
<td>項目９－１</td>
<td>項目９－２</td>
</tr>
</table>
</div>
</td>
<!--
＋－－－－－－－－－－－－－－－－－－－－－－－－－－－－－＋
｜　　　　　　　　　　　　　　｜　　　　　　　　　　　　　　｜
＋－－－－－－－－－－－－－－＋－－－－－－－－－－－－－－＋
｜　　　　　　　　　　　　　　｜データ用テーブル　　　　　　｜
＋－－－－－－－－－－－－－－＋－－－－－－－－－－－－－－＋
データ用テーブルはjavascriptに渡すための、idを任意で設定する(ここではcontents)
CSSのクラスは各スクロール設定関数
xscroll
yscroll
xyscroll
の中で、実行時に設定される。
-->
<td valign="top" halign="left">
<div id="contents">
<table class="grid">
<tr>
<td nowrap width="150">データ１－１</td>
<td nowrap width="150">データ１－２</td>
<td nowrap width="150">データ１－３</td>
<td nowrap width="150">データ１－４</td>
<td nowrap width="150">データ１－５</td>
<td nowrap width="150">データ１－６</td>
<td nowrap width="150">データ１－７</td>
<td nowrap width="150">データ１－８</td>
<td nowrap width="150">データ１－９</td>
</tr>
<tr>
<td>データ２－１</td>
<td>データ２－２</td>
<td>データ２－３</td>
<td>データ２－４</td>
<td>データ２－５</td>
<td>データ２－６</td>
<td>データ２－７</td>
<td>データ２－８</td>
<td>データ２－９</td>
</tr>
<tr>
<td>データ３－１</td>
<td>データ３－２</td>
<td>データ３－３</td>
<td>データ３－４</td>
<td>データ３－５</td>
<td>データ３－６</td>
<td>データ３－７</td>
<td>データ３－８</td>
<td>データ３－９</td>
</tr>
<tr>
<td>データ４－１</td>
<td>データ４－２</td>
<td>データ４－３</td>
<td>データ４－４</td>
<td>データ４－５</td>
<td>データ４－６</td>
<td>データ４－７</td>
<td>データ４－８</td>
<td>データ４－９</td>
</tr>
<tr>
<td>データ５－１</td>
<td>データ５－２</td>
<td>データ５－３</td>
<td>データ５－４</td>
<td>データ５－５</td>
<td>データ５－６</td>
<td>データ５－７</td>
<td>データ５－８</td>
<td>データ５－９</td>
</tr>
<tr>
<td>データ６－１</td>
<td>データ６－２</td>
<td>データ６－３</td>
<td>データ６－４</td>
<td>データ６－５</td>
<td>データ６－６</td>
<td>データ６－７</td>
<td>データ６－８</td>
<td>データ６－９</td>
</tr>
<tr>
<td>データ７－１</td>
<td>データ７－２</td>
<td>データ７－３</td>
<td>データ７－４</td>
<td>データ７－５</td>
<td>データ７－６</td>
<td>データ７－７</td>
<td>データ７－８</td>
<td>データ７－９</td>
</tr>
<tr>
<td>データ８－１</td>
<td>データ８－２</td>
<td>データ８－３</td>
<td>データ８－４</td>
<td>データ８－５</td>
<td>データ８－６</td>
<td>データ８－７</td>
<td>データ８－８</td>
<td>データ８－９</td>
</tr>
<tr>
<td>データ９－１</td>
<td>データ９－２</td>
<td>データ９－３</td>
<td>データ９－４</td>
<td>データ９－５</td>
<td>データ９－６</td>
<td>データ９－７</td>
<td>データ９－８</td>
<td>データ９－９</td>
</tr>
</table>
</div>
<!--
最後にどのタイプのスクロールバーにするかを指定する。
xyscroll・・・縦横スクロール
xscroll・・・横スクロール
yscroll・・・縦スクロール
引数はそれぞれ
　 上側ヘッダ部分のdivのid(横スクロールに連動して動く見出し)
　 左側ヘッダ部分のdivのid(縦スクロールに連動して動く見出し)
　 データ部分のdivのid
　 データ部分のwidth
　 データ部分のheight
を指定する。
-->
<script>
xyscroll("top_label", "left_label", "contents", 500, 100);
//xscroll("top_label", "left_label", "contents", 500, 100);
//yscroll("top_label", "left_label", "contents", 500, 100);
</script>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment