Fixing Smooth Scrolling with Find-on-Page

Our v17 site design (now upgraded to v18) initially included html { scroll-behavior: smooth; } in the CSS. This resulted in user feedback highlighting a significant usability issue: the slow, smooth scrolling during Ctrl F or Cmd F searches made finding information considerably slower.

Consequently, this feature was removed. The lack of granular control over smooth scrolling behavior proved problematic.

While smooth scrolling is often touted as a CSS best practice, my experience underscored its drawbacks. Christian Schaefer, however, offered an elegant solution:

This clever workaround addresses the conflict between smooth scrolling and the find-on-page functionality. Christian's blog post details this approach:

Smooth scrolling affects all page elements, including browser search results (at least in Chromium). Ideally, browsers would provide an exception for find-on-page searches. Until this is addressed, a CSS/HTML workaround is necessary.

The uncertainty remains whether this is a browser bug or simply an unaddressed aspect of the find-on-page functionality, as it's not a standardized web technology feature.

The proposed solution:

html:focus-within {
  scroll-behavior: smooth;
}

This largely resolves the issue. However, a limitation arises with non-focusable elements:

<a href="https://www.php.cn/link/7061e21a9f25d161a08e86b144065bc8">Jump down</a>

...

<h2 id="Header">Header</h2>

While smooth scrolling enhances the experience of jumping to links, the <h2></h2> header, typically unfocusable, loses smooth scrolling with the above CSS. To maintain smooth scrolling in such cases, adding tabindex="-1" is necessary:

<h2 id="Header">Header</h2>

This provides a more nuanced approach to managing smooth scrolling behavior.

The above is the detailed content of Fixing Smooth Scrolling with Find-on-Page. For more information, please follow other related articles on the PHP Chinese website!