ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック

ここ数年で、スクロールしてもヘッダが上部に固定配置されているページが増えてきました。UX的には便利な面もありますが、その反面問題もあります。固定ヘッダがあるページでページ内リンクをクリックすると、移動した先が固定ヘッダに重なって隠れます。 そこでscroll-snapプロパティの登場です。scroll-snapのscroll-paddingプロパティを使用して、この問題を解決するCSSのテクニックを紹介します。 Fixed Headers, On-Page Links, and Overlapping Content, Oh My! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ページ内リンクが固定ヘッダと重なって隠れる scroll-paddingとscroll-margin 「scroll-snapプロパティ」のサポートブ

[coliss]

スクロールして、ページ内リンクが固定ヘッダと重なって隠れてしまう問題を解決するテクニック。

[kyompi]

これはうれしい。いつも困ってた。

[unarist]

scroll-padding

[nismit]

他のブラウザも早く対応してくれたら嬉しいなーこれ。

[takaya1992]

“scroll-padding” か〜知らなかった。現在はChromeのみ対応。

[yoshi-na]

“現在のところ、Chormeのみ” “現在のところ、Chormeのみ” …

[kathew]

ありがちな問題。はてブもスターの通知から飛んだ先で起こってるやつ。chromeだけかー／いつもはJavaScriptでヘッダ高さ分スクロール位置をずらしてる

[buhoho]

そも固定ヘッダ嫌い。特にタブとかツールバーより太いばかみたいなヘッダを固定にしてるサイトは地獄で反省してね

[tsuki-rs]

めっちゃええねんけど、Chromeのみかぁ〜。

[inazuma2073]

固定ヘッダページのページ内リンクをいい感じにする方法

[mami-hate]

PC/SP共に使える