横に長い表を作るとき、見出し行や左端の項目名をどう固定するかで手が止まった経験は多いと思う。Chromeの開発者向けブログに8月20日付で公開された次期版の先行情報によると、その悩みに直接効く変更がブラウザに入る。overflowプロパティで縦と横に別々の値を組み合わせられるようになるというもので、たとえば横はスクロールさせ、縦は切り取り(clip)にする、という書き分けが指定どおりに扱われる。ひとつの軸だけがスクロールする箱、という考え方をCSSの側で素直に表せるようになる。まだ先行版の段階なので、正式版で使えるようになるのはもう少し先になる。

これまでのCSSは、片方の軸にスクロール系の値を指定すると、もう片方も実質的にスクロール可能な箱として扱っていた。clipと書いても内部的にはhiddenへ変換されるため、その中でposition: stickyを使った要素は、思っていたのとは別の箱を基準にして固定される。表の上端と左端の両方を固定したかったのに片方しか張り付かない、という現象の正体はここにあった。公開されている提案文書でも、この扱いが出発点の課題として説明されている。スクロールのたびに位置を計算しなおす回避策もあったが、電池を消費し、保守も面倒で、スクロールが非同期である以上ぴったり合わせるのは難しかったとされている。

表とカルーセルで違いが出る

提案文書が挙げている例は二つある。ひとつは、上に見出し、左に項目名を並べた表を、スマートフォンから縦にも横にも動かして読む場面。表を包む要素にoverflow: scroll clipを書いておけば、どちらのラベルも見えたまま奥まで読み進められる。もうひとつは横並びのカルーセルで、縦方向は見た目の上で隠してあっても、スクリプトからscrollIntoViewを呼んだ拍子に縦へずれてしまうことがある。hiddenは利用者が触れないだけで、スクリプトからは動かせるためだ。しかも利用者の側は手で戻せないので、ずれたままになる。clipを指定した軸は動かないと決められる、という整理になっている。

気をつけたいのは互換性で、以前はoverflow: scroll clipと書いてもscroll hiddenとして解釈されていた。古いコードにこの書き方が残っているサイトでは、見え方が変わる可能性がある。同じ先行版には、斜めに動かしたいのにブラウザが勝手に一方向へ寄せてしまうのを止めるscroll-axis-lockという指定も入っており、スクロールまわりの細かい要望が続けて拾われている印象がある。料金表や仕様一覧のように横へ広がる表は、中小企業のサイトでも珍しくない。JavaScriptで位置を合わせていた部分をそのまま減らせる場面は出てくるはずなので、正式版に降りてくる時期を見ながら、手元の表がどの箱に閉じ込められているかを一度確かめておきたい。