scrollなんちゃらの名前が覚えられない
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties
こちらにCSS 仕様書で定義されているプロパティが列挙されていますが、画面のスクロール制御に関するものだけでも沢山のバリエーションがあり、正直どれがどれだったか毎回調べるので個人的な備忘録としてまとめました。
(※スクロールバー関連は必要な場面も少なくなったので省略しています)
「スクロール」が前か後に「スクロール」か……で分類していますが、口語だと揺れがある印象なので、ひとまずCSSのプロパティ名の順序に準拠しています。
スクロール●●
スクロールビヘイビア
scroll-behavior
スクロールの「振る舞い(behavior)」を設定します。デフォルトは auto ですが、smooth にすることで各種ブラウザが定めたスムーススクロール挙動をサイト全体に一瞬で実装できます。
ただしこちらを利用する懸念については以下の記事で触れていますのでよければ参照ください。
スクロールマージン・パディング
scroll-margin scroll-padding
スクロールで移動した場合にのみ適用される見えない余白(マージン・パディング)を指定します。
具体的にはアンカーリンクした先の上端が画面固定要素(ヘッダーなど)と被ってしまった場合などの調整を、このプロパティを指定することで行うことが出来ます。
それだけであればどちらを使ってもよいですが、外側に付く余白か・内側に付く余白かの挙動は margin padding と同様です。
ただし、「見えない」という特性上このスクロールマージンが考慮されるのはあくまで通常のアンカーリンクやネイティブ実装のスムーススクロール( scrollIntoView() の場合など )のみであることをご注意ください。
スクロールスナップ(スナップスクロール)
scroll-snap-type scroll-snap-align scroll-snap-stop
通常のスクロールと違い、指定された範囲内でスクロールがピタッと止まるようになる指定です。scroll-snap-type ではX, Y方向のスクロール指定と合わせて、mandatory や proximity といった、あまり聴き慣れない単語でスナップの吸いつく強度を指定することができます。例えば必ずY方向にスナップを強制したい場合は x mandatory と指定します。( 他のプロパティみたいに scroll-snap-type-x とかではないので注意 )
また、先の scroll-margin や scroll-padding と組み合わせることでスナップ位置の調整をより詳細に行うことも可能です。
◯◯スクロール
オーバースクロール
overscroll-behavior
スクロール領域を超えたスクロールを行った・行おうとした際の「振る舞い(behavior)」を設定します。スクロール領域が入れ子になっている際に、 contain を設定すれば現在スクロールしている領域より外側のスクロールを止めることができます。
※iOS(Safari)でURLバーが出ている場合などに無効化されるなど例外はありますが🥺
また、 none とすれば更にスクロール端に到達した際の跳ね返りなども抑制されます。
用途上 overflow: scroll; =スクロールの許可指定と同時に行うことが多いのですが、こちらの表記は overscroll- になる(※flowがない)ので混同しがちです。ややこしい……。
プロパティ名に「scroll」が含まれていないもの
スクロールアンカリング
overflow-anchor
(もはやプロパティ名に scroll の欠片すら含まれていませんが)各種Webブラウザが有効化している「スクロールアンカリング」と呼ばれるスクロール固定の制御動作を抑制することができます。
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Properties/overflow-anchor
スクロールアンカリングという機能について……たとえば悪質な広告画像などが今見ているスクロール位置より上側に出現した場合、その影響によってページ全体のコンテンツの位置が下にズレてしまいます。そうなると、当然自分が今見ていたはずのスクロール位置も同様にズレてしまうため、(自分では何もしていないのに)画面が動いて見えてしまうことがあるかもしれません。
スクロールアンカリングが有効化されていれば、そういった見ている画面=ビューポートより外側ブロックの可変による影響を起こさないよう、実際の画面スクロール位置を動かさないように保つことができます。
(そういった悪質なサイトが増えすぎたため)こちらの機能はモダンブラウザでは既定として auto (有効)となっていますが、JSなどで詳細にスクロール処理を行う際にはこの気遣いが邪魔になる場合もあるため、 none で無効化=オプトアウトするために生まれたプロパティです。
ただし、同じく overflow- で始まるプロパティ、overflow-wrap (元 word-wrap )などとはほとんど関係ありません。なんでこの名前になってしまったんでしょう……。
結論
プロパティ名だと scroll なんちゃらより over なんちゃらがややこしいという話でした。