タグ

2021年1月22日のブックマーク (1件)

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

    ページにhtml {scroll-behavior: smooth;}を加えるだけで、簡単にページ内のスクロールのすべてがスムーズになります。一昔前はJavaScriptやjQueryのプラグインで実装していますが、非常に簡単に実装できるようになりました。 「すべてがスムーズになる」弊害が1つあり、ページ内検索時にも適用されてしまいます。複数のキーワードがページ内にある場合は、時間がかかってしまいます。 このページ内検索時を除外して、ページ内にscroll-behavior: smooth;を適用するテクニックを紹介します。 仕様なのか、不具合・バグなのか、いずれにしろ簡単に対応できます。 Fixing Smooth Scrolling with Find-on-Page 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS-

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