テーブル機能追加
前回の記事で作ったヘッダ固定スクロール表に機能を追加。
- 見出し列のグルーピングについて、スクロールして表示される範囲の中央に表示。
- セルをクリックしてテキストボックスを表示（実際の編集処理は省略）
See the Pen Untitled by cfd-ack (@cfd-ack) on CodePen.
スクロール位置 scrollTop、スクロールボックスの高さ、見出し行 thead の高さより
セルが表示されているか計算。
表示されていればその表示領域の中央になるようにコンテンツの位置を調整する。
課題
単純なプロトタイプなのでパフォーマンス的な問題があるかも。
Chromeは問題ないがFireFoxでスクロール時の動きがガタつく。
IntersectionObserver で判定を減らしてもあまり効果なさそう・・・
要素の位置を変えることでリフローが発生している？
セルをクリックした際に、セル全体が表示されるよう scrollIntoView() を呼んでいるが
スムーズスクロールが上方向と左方向にしか効いていない。
FireFoxではセル全体が表示しきれないことがある。
requestAnimationFrame を使ってスムーズスクロールを実装するのもありか。