レスへのジャンプ／スクロールについての調査
概要
専用ブラウザの大きな特徴として、>>1といったリンクをクリックすることによるジャンプがあります。しかし、IEコンポーネント上での実装についてはブラウザによって異なっています。
なお、ブラウザによって「ジャンプ」「スクロール」と呼称が異なりますが、ここでは「ジャンプ」に統一して記述します。
方式の比較
scrollIntoView()
アンカーオブジェクトのメソッドによりジャンプする方法
- 長所
- 簡単な記述のみで済む。
- 短所
- 水平スクロールバーが出ている場合、bodyからレス番号までのピクセル分だけ横スクロールもしてしまう。
- 対策
- ジャンプ後に左スクロールして調整する
- 水平スクロールバーが出ないように調整する
offsetTop
bodyオブジェクトのプロパティに、アンカーオブジェクトのoffsetTopを設定する方法。
- 長所
- 水平スクロールバーの有無に拘らず、正確にジャンプできる。
- 短所
- HTMLやCSSの記述如何では、一切ジャンプできなくなることもある。
- 対策
- offsetParentを使って、ページ左上からの高さを正確に取得するための手続きをつける。
ただし、IE6の解釈モード(standards/quirks)によって、ページ左上に該当する要素が異なってくるので、将来的なことを考えると注意が必要である。
ブラウザの実装状況
それぞれのブラウザは以下のようになっている。（ゾヌ２はダブルウィンドウとなるため除外した）
| 方式 | 短所への対策 | |
|---|---|---|
| かちゅ | scrollIntoView() | ジャンプ後に左スクロール |
| A Bone | scrollIntoView() | CSSの設定で横スクロールが出ないように設定 |
| ギコ | offsetTop(*1) | なし |
| Live | offsetTop | なし |
| OpenJ | offsetTop | body要素まで遡る |
| Acty | offsetTop | なし |
| twin | scrollIntoView() | なし |
- (*1)：リンクのクリックイベントに関連付けられていないので、実際にジャンプはできない。
調査方法
調査にあたっては、まずスレッドの表示を擬似フレーム化することで、offsetの値を取得できなくすることで分類した。
その後、scrollIntoView()方式のものについては水平スクロールバーを出して分類し、offsetTop方式のものについては特定のHTML+CSSにより分類した。
考察
いずれの方式が優れているとはいえないが、いずれを選択するにしても、ブラウザ側において何がしかの対策が必要である。
また、スキンを作成する上で、擬似フレームを用いる場合には、offset方式のブラウザへの対応するため、クリックイベントを掠めてscrollIntoView()する必要がある。