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

ここ数年で、スクロールしてもヘッダが上部に固定配置されているページが増えてきました。UX的には便利な面もありますが、その反面問題もあります。固定ヘッダがあるページでページ内リンクをクリックすると、移動した先が固定ヘッダに重なって隠れます。

そこでscroll-snapプロパティの登場です。scroll-snapのscroll-paddingプロパティを使用して、この問題を解決するCSSのテクニックを紹介します。

サイトのキャプチャ

Fixed Headers, On-Page Links, and Overlapping Content, Oh My!


下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

ページ内リンクが固定ヘッダと重なって隠れる

基本的なページ内リンクのコードを見てみましょう。

このa要素がクリックされると、ブラウザはそのIDを持つ要素にスクロールします。これはブラウザの古くからある誰もが知っている機能です。

しかし、ページ内にposition: fixed;が使用されている要素があると、問題があります。ブラウザはターゲットにされた要素にジャンプするでしょう、しかしその要素は、固定位置要素に重なって隠れてしまいます。

この問題について、私はいくつかの解決策を「Hash Tag Links That Don’t Headbutt The Browser Windowで記事にしました。また、Nicolas Gallagerはこれとは異なるテクニックを「Jump links and viewport positioning」でドキュメントにしています。

私はCSS-Tricksで固定位置のヘッダを使用しています、そしてそれらのテクニックのどれも好きではありません。私が使用したのは、<h3>要素の上にpaddingを追加することです。paddingの値はちょうどヘッダの高さです。

ヘッダの高さ分のpaddingを追加

固定ヘッダに隠されないように、高さ分のpaddingを追加

この方法は簡単ですが、すべての要素にpaddingを与えなくてはいけないので、スマートではありません。

scroll-paddingとscroll-margin

新しい方法があります!
The CSS scroll-padding property adjusts a scroll container’s optimal viewing region」でドキュメント化されています。

新しい方法とは、CSSのscroll-snapにはたくさんのプロパティがあり、その中のscroll-paddingとscroll-marginは、scroll-snapコンテナの外側でも使用できることです。

追記:
「body」にスタイルを記述していましたが、Mozillaの@hiikezoe氏より、bodyエレメントに指定した値はdocumentのroot elementには適用されない、と指摘があったため、「html」に修正しました。ただし、htmlに指定するとChromeでは動作しませんが、それはChromeのバグです。

たったこれだけのコードですべての要素がページ内リンクで移動しても隠れなくなります。現在のところ、Chormeのみで機能します。

【訳者注】
CSSのscroll-snap自体も非常に便利なので、これから実装の機会が増えると思います。

「scroll-snapプロパティ」のサポートブラウザ

scroll-snapは、デスクトップ用ではOperaを除くすべてのブラウザでサポートされています。スマホ用ではiOSとAndroidの主要ブラウザでサポートされています。

サイトのキャプチャ

scroll-snapのサポートブラウザ

sponsors

top of page

©2019 coliss