scroll-behavior: smooth;によるページ内検索時のスクロールを除外するテクニック
Post on:2021年1月18日
sponsors
ページにhtml {scroll-behavior: smooth;}を加えるだけで、簡単にページ内のスクロールのすべてがスムーズになります。一昔前はJavaScriptやjQueryのプラグインで実装していますが、非常に簡単に実装できるようになりました。
「すべてがスムーズになる」弊害が1つあり、ページ内検索時にも適用されてしまいます。複数のキーワードがページ内にある場合は、時間がかかってしまいます。
このページ内検索時を除外して、ページ内にscroll-behavior: smooth;を適用するテクニックを紹介します。
仕様なのか、不具合・バグなのか、いずれにしろ簡単に対応できます。
Fixing Smooth Scrolling with Find-on-Page
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
CSS-Tricksのv17を公開した時（現在はv18）、ページ内のスクロールをスムーズにするためにhtml {scroll-behavior: smooth;}をCSSに加えました。
すると、すぐにコメントを受け取りました（下記はその一例）。
CSS-Tricksでctrl+Fやcommand+Fのページ内検索を実行すると、検索結果にスナップする代わりにゆっくりとスクロールされるので、検索した語句を見つけるのに時間がかかります。私はこのショートカットを頻繁に使用するので、使い勝手が悪いです。
html {scroll-behavior: smooth;}を使用していた期間はそれほど長くなく、結局削除しました。それほど魅力的に感じてなかったこともありますが、スクロールを制御できないということが主な理由です。
先日「CSS tips」というツイートを見かけたので、私の経験をツイートしました。
Anecdotal thing: when I had this on @CSS, I had SO MANY reports of people annoyed that when they did "find on page" and ⬆️⬇️ through the results, the smooth scrolling was slow and annoying. Unfortunately, you can't control the speed or when it happens. https://t.co/HAio46bYQt
— Chris Coyier (@chriscoyier) January 5, 2021
それに対して、Christian Schaeferが素晴らしいアイデアをツイートしました。
You could try fix it with
html:focus-within {
scroll-behavior: smooth;
}— Christian Schaefer (@derSchepp) January 5, 2021
これは素晴らしいです！
彼のブログにこう書かれています。
スムーズなスクロールはすべてに適用されます。ブラウザでのページ内検索を含めて、常にです。少なくともChromiumではすべてに適用されます。ページ内検索では、ブラウザがそのルールに例外を設けスムーズなスクロールを無効にすることが望ましいでしょう。Chromiumの開発チームがその問題を修正するまでの間、CSSとHTMLに少し手を加えるだけで問題を自分で解決できます。
Chromeがそれをバグと見なすかどうかは分かりません。ページ内検索は実際にWebテクノロジーの機能ではないため、この問題が特定されているとは思えません。しかし、いずれにしても、私はページ内検索でそうならない方を好みます。
|
1 2 3 |
html:focus-within { scroll-behavior: smooth; } |
このCSSはほとんどの場合、機能します。
残念な時は下記のような場合です。
|
1 2 3 4 5 |
<a href="#link-down-the-page">Jump down</a> ... <h2 id="link-down-the-page">Header</h2> |
リンクをクリックすると、<h2>に移動します。scroll-behavior: smooth;があると、いい感じですね。しかし、<h2>は通常、フォーカス可能な要素ではありません。そのため、上記のテクニックを使用すると、<html>内にフォーカスがなくなり、スムーズなスクロールが失われてしまいます。
<h2>をフォーカス可能な要素にするにはtabindexを加えます。これでページ内アンカーでもスムーズなスクロールになります。
|
1 |
<h2 tabindex="-1" id="link-down-the-page">Header</h2> |
sponsors
