昨日の作業で，PyukiWikiのbugtrack_listの一覧に対してAjaxで動的に行を追加するという仕組みができた．(「さらに10件」ボタン)

しかし行を一方的に追加するだけでは，テーブルがどんどん縦に長くなってレイアウト的にどうかという気がする．

そこで，テーブルに縦方向へのスクロールバーをつけて，テーブルがどんどん長くなるのではなく，上下にスクロールして中身を見れるようにしてみる．

テーブルをスクロール可能にするには，テーブルの内容をinnerHTMLとして流し込んでいるブロック(div)に対して， 

overflow: auto
のスタイルを指定するだけなので簡単．．．

しかしせっかくの機会なので，一番下の行までスクロールすると，「さらに10件」ボタンを押さなくても自動的に行が追加されるという動きに挑戦することにした． 

<div id="bugtrack_list" style="height:50ex;" onScroll="onScr()"></div>
という感じでスクロールイベント(onScroll)は取れるので，このイベントハンドラ内でどれだけスクロールされたかを判断し，行追加すべき状況なら行追加すればよい．

この行追加すべきかどうかの判断だが，最初は単純に div.scrollTop がある程度の決め打ちの値を超えたかどうかを見れば良かろうと思っていたが，色々試してみると，ブラウザのフォントサイズの違いやブラウザの横幅によって，適切なscrollTopの値が変わるので，決め打ちできないということがわかった．

大きいフォントだと早く行追加されるし，逆にフォントが小さいと，最後までスクロールしても行が追加されなかったり．．．トホホ

で，色々試行錯誤したところ，以下の3つのプロパティを見て判断すれば，いい感じの動きになった．

  • div.scrollTop : テーブルの最上部とテーブルの見えている最上部の間の距離．下にスクロールバーを動かすと，増える．
  • table.offsetHeight : テーブルの不可視部分も含む全体の高さ．行追加されると増える．フォントサイズ拡大，ブラウザの横幅縮小でも増える．逆にフォントサイズ縮小，ブラウザ横幅拡大で減る．
  • div.offsetHeight : 可視領域の高さ．

のとき， テーブルに行を追加すべき条件： 

div.scrollTop + div.offsetHeight >= table.offsetHeight

となる．スクロールバーが一番下に来たときに，上式が成り立つ．これでひとまずできあがり．

今回改造した結果も，れんさWikiのBugTrackに組み込んだ．

しかしこの動きは気持ちいいデス．．．サーバへの負荷を忘れて何回もスクロールして遊んでしまう．あへぇ〜

役に立った資料：

© 2024 KMIソフトウェア