fix: skip-to-content scroll behavior by jhildenbiddle · Pull Request #2401 · docsifyjs/docsify

Summary

Fixes an issue the new (unreleased) "Skip to Content" link that caused an immediate jump to to the content (instead scrolling) and the main content to scroll down (instead of being static) into place.

Example of bug (develop branch preview w/ Chrome 123)

The incorrect behavior is the result of three separate things occurring at the same time:

  1. By default, browsers will automatically scroll any offscreen element that receives focus into view. This is the correct behavior for accessibility purposes because the focused item should be in view.
  2. Clicking the "Skip to Content" link places the focus on the main content area. This is the correct behavior for accessibility purposes because the focused item should be in view. However, by placing the focus on an off-screen element, the browser's default behavior (see above) causes the scroll position to jump to the content instead of smoothly scrolling to it.
  3. Docsify's "smooth scroll" behavior aligns the main content container element to the top edge of the viewport.
Example-Bug.mp4

Example of fix (PR changes w/ Chrome 123)

The fix if simple thanks to modern APIs: set the preventScroll option to true when calling the browser's native focus() method:

Example-fix.mp4

Related issue, if any:

None

What kind of change does this PR introduce?

Bugfix

For any code change,

N/A

Does this PR introduce a breaking change?

No

Tested in the following browsers:

  • Chrome
  • Firefox
  • Safari