Entry

JavaScript メモ - 特定の要素のスクロールバーを遷移前と遷移後で固定する

2006年11月28日

まぁ……滅多に書かない JavaScript なんですけれど,書く機会があったのでメモ。

何かメニューみたいなもんを作るときに,ラジオボタンやチェックボックスをクリックしてもらって画面を遷移させることがあります。例えば,こういうもんです。

foobar01
foobar02
foobar03
foobar04
foobar05
foobar06
foobar07
foobar08
foobar09
foobar10
foobar11
foobar12
foobar13
foobar14
foobar15
foobar16
foobar17
foobar18
foobar19
foobar20

ここでは外見しかないからクリックしても動かないけれども,こういうメニューを使って CGI なりなんなりを呼び出そうというわけです。onClick イベントを使って submit() を呼ぶんですね。で,こういうスクロールバーがあるメニューでは,特に自分を呼び出し直したりした場合に,スクロールバーが上に戻ってしまいます。これは少し不自然だし,なんとかしたいところ。

こういうのって,みんなどうしてるんだろうと思って,あちこち探し回ったんですけれど,コレといった紹介はあまりありませんでした。というわけで,作ったものを書いておきます。

早速紹介すると,こんな感じになりました。ファイル名は form の action 属性の値と同じ foo.html としておきます(つまり,自分を呼ぶということ)。

<html>
<head>
<script>
<!--
function setPos() {
  document.form01.pos.value = document.form01.scrollTop;
  document.form01.submit();
}

function getPos() {
  var param = location.search;
  if (!param) {
    return false;
  }
  param = param.substring(1);
  var pair = param.split("&");
  var i = "";
  var tmp = "";
  var key = new Array();
  for (i = 0; i < pair.length; i++) {
    tmp = pair[i].split("=");
    keyName = tmp[0];
    keyValue = tmp[1];
    key[keyName] = keyValue;
  }
  // key["pos"]がある場合はscrollTopを設定
  if (!key["pos"]) {
    return false;
  } else {
    document.form01.scrollTop = key["pos"];
  }
  return true;
}
//--></script>
</head>
<body onLoad="getPos()">
<form action="foo.html" method="GET" name="form01"
      style="width : 120px; height: 150px; overflow-x : hidden; overflow-y : scroll;">
<input type="hidden" name="pos" value="">
<table>
<tr><td><input type="radio" name="rad01" value="01"
  onClick="setPos()"></td><td>foobar01</td></tr>
<tr><td><input type="radio" name="rad01" value="02"
  onClick="setPos()"></td><td>foobar02</td></tr>
<tr><td><input type="radio" name="rad01" value="03"
  onClick="setPos()"></td><td>foobar03</td></tr>
<tr><td><input type="radio" name="rad01" value="04"
  onClick="setPos()"></td><td>foobar04</td></tr>
<tr><td><input type="radio" name="rad01" value="05"
  onClick="setPos()"></td><td>foobar05</td></tr>
<tr><td><input type="radio" name="rad01" value="06"
  onClick="setPos()"></td><td>foobar06</td></tr>
<tr><td><input type="radio" name="rad01" value="07"
  onClick="setPos()"></td><td>foobar07</td></tr>
<tr><td><input type="radio" name="rad01" value="08"
  onClick="setPos()"></td><td>foobar08</td></tr>
<tr><td><input type="radio" name="rad01" value="09"
  onClick="setPos()"></td><td>foobar09</td></tr>
<tr><td><input type="radio" name="rad01" value="10"
  onClick="setPos()"></td><td>foobar10</td></tr>
<tr><td><input type="radio" name="rad01" value="11"
  onClick="setPos()"></td><td>foobar11</td></tr>
<tr><td><input type="radio" name="rad01" value="12"
  onClick="setPos()"></td><td>foobar12</td></tr>
<tr><td><input type="radio" name="rad01" value="13"
  onClick="setPos()"></td><td>foobar13</td></tr>
<tr><td><input type="radio" name="rad01" value="14"
  onClick="setPos()"></td><td>foobar14</td></tr>
<tr><td><input type="radio" name="rad01" value="15"
  onClick="setPos()"></td><td>foobar15</td></tr>
<tr><td><input type="radio" name="rad01" value="16"
  onClick="setPos()"></td><td>foobar16</td></tr>
<tr><td><input type="radio" name="rad01" value="17"
  onClick="setPos()"></td><td>foobar17</td></tr>
<tr><td><input type="radio" name="rad01" value="18"
  onClick="setPos()"></td><td>foobar18</td></tr>
<tr><td><input type="radio" name="rad01" value="19"
  onClick="setPos()"></td><td>foobar19</td></tr>
<tr><td><input type="radio" name="rad01" value="20"
  onClick="setPos()"></td><td>foobar20</td></tr>
</table>
</form>
</body>
</html>

もうちょっとスマートなやり方がありそうなもんですけれど,とりあえずこんな感じ。遷移後もスクロールバーは遷移前と同じ位置に固定されるはずです。

仕組みはというと,ラジオボタンを選択して遷移する前に,setPos() で document.form01 のスクロール位置を隠しフィールド pos に保存。GET で渡して,onLoad と一緒に getPos() でクエリの中身を戻すといった方法です。Firefox 2.0 と IE 6.0 で試したところ,どちらでも動きました。

ただ,これだと POST メソッドでは動かないんですよね。値の渡し方を工夫すればいいだけなんでしょうけれど,POST を使うときは,CGI なりなんなりが控えているのが普通ですから,クエリの中身を JavaScript に埋め込むのが手っ取り早いんだと思います。

それにしても,なんだか最近プログラムネタばっかだな……。

Trackback
Trackback URL:
Ads
About
Search This Site
Ads
Categories
Recent Entries
Log Archive
Syndicate This Site
Info.
クリエイティブ・コモンズ・ライセンス
Movable Type 3.36
Valid XHTML 1.1!
Valid CSS!
ブログタイムズ

© 2003-2012 AIAN