ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック
Post on:2019年4月8日
sponsors
ここ数年で、スクロールしてもヘッダが上部に固定配置されているページが増えてきました。UX的には便利な面もありますが、その反面問題もあります。固定ヘッダがあるページでページ内リンクをクリックすると、移動した先が固定ヘッダに重なって隠れます。
そこでscroll-snapプロパティの登場です。scroll-snapのscroll-paddingプロパティを使用して、この問題を解決するCSSのテクニックを紹介します。
Fixed Headers, On-Page Links, and Overlapping Content, Oh My!
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
ページ内リンクが固定ヘッダと重なって隠れる
基本的なページ内リンクのコードを見てみましょう。
|
1 |
<a href="#section-two">Section Two</a> |
この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を与えなくてはいけないので、スマートではありません。
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コンテナの外側でも使用できることです。
|
1 2 3 |
html { scroll-padding-top: 70px; /* 固定ヘッダの高さ分 */ } |
追記:
「body」にスタイルを記述していましたが、Mozillaの@hiikezoe氏より、bodyエレメントに指定した値はdocumentのroot elementには適用されない、と指摘があったため、「html」に修正しました。ただし、htmlに指定するとChromeでは動作しませんが、それはChromeのバグです。
たったこれだけのコードですべての要素がページ内リンクで移動しても隠れなくなります。現在のところ、Chormeのみで機能します。
See the Pen
Scroll Padding on Fixed Postion Headers by Chris Coyier (@chriscoyier)
on CodePen.
【訳者注】
CSSのscroll-snap自体も非常に便利なので、これから実装の機会が増えると思います。
「scroll-snapプロパティ」のサポートブラウザ
scroll-snapは、デスクトップ用ではOperaを除くすべてのブラウザでサポートされています。スマホ用ではiOSとAndroidの主要ブラウザでサポートされています。
sponsors
