scroll-behavior: smooth;によるページ内検索時のスクロールを除外するテクニック

ページにhtml {scroll-behavior: smooth;}を加えるだけで、簡単にページ内のスクロールのすべてがスムーズになります。一昔前はJavaScriptやjQueryのプラグインで実装していますが、非常に簡単に実装できるようになりました。

「すべてがスムーズになる」弊害が1つあり、ページ内検索時にも適用されてしまいます。複数のキーワードがページ内にある場合は、時間がかかってしまいます。
このページ内検索時を除外して、ページ内にscroll-behavior: smooth;を適用するテクニックを紹介します。

仕様なのか、不具合・バグなのか、いずれにしろ簡単に対応できます。

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」というツイートを見かけたので、私の経験をツイートしました。

それに対して、Christian Schaeferが素晴らしいアイデアをツイートしました。

これは素晴らしいです!

彼のブログにこう書かれています。

スムーズなスクロールはすべてに適用されます。ブラウザでのページ内検索を含めて、常にです。少なくともChromiumではすべてに適用されます。ページ内検索では、ブラウザがそのルールに例外を設けスムーズなスクロールを無効にすることが望ましいでしょう。Chromiumの開発チームがその問題を修正するまでの間、CSSとHTMLに少し手を加えるだけで問題を自分で解決できます。

Fixing Smooth Scrolling & Page Search

Chromeがそれをバグと見なすかどうかは分かりません。ページ内検索は実際にWebテクノロジーの機能ではないため、この問題が特定されているとは思えません。しかし、いずれにしても、私はページ内検索でそうならない方を好みます。

このCSSはほとんどの場合、機能します。
残念な時は下記のような場合です。

リンクをクリックすると、<h2>に移動します。scroll-behavior: smooth;があると、いい感じですね。しかし、<h2>は通常、フォーカス可能な要素ではありません。そのため、上記のテクニックを使用すると、<html>内にフォーカスがなくなり、スムーズなスクロールが失われてしまいます。

<h2>をフォーカス可能な要素にするにはtabindexを加えます。これでページ内アンカーでもスムーズなスクロールになります。

sponsors

top of page

©2021 coliss