Twenty Twenty: Replace JS-based smooth scroll with CSS

[williampatton]

The theme currently uses a JS based approach for smooth scroll. A CSS based approach was suggested as an alternative. Discussions were ongoing and there are pros and cons to each method.

Issue: ​https://github.com/WordPress/twentytwenty/issues/476
PR: ​https://github.com/WordPress/twentytwenty/pull/506

Details from the original ticket from GitHub:

Smooth scroll is currently implemented using a JS approach, that hijacks all anchors pointing to another location in the page, and replaces their default behaviour with a script that animates a page scroll. This is problematic for a number of reasons:

The animation is JS-based, blocking the main thread while executing and potentially leading to jank in slower devices (and some faster ones where JS-driven animations run at 60Hz while CSS-driven ones run at higher rates).
Being JS-based, the behaviour only takes place after the JS is fully loaded and executed, leading to inconsistencies in behaviour between the initial interactive page and the final one.
It hijacks regular anchors, which could interfere with screen readers and other assistive technologies.
It's a non-configurable behaviour that may be undesirable for certain categories of users that prefer less motion.
It's a non-standard behaviour that may interfere with how certain user agents display scrolling pages.
The current implementation is ~130 lines of complex JS (between smooth scroll, scrollToElement, and utility methods), that tries to take into account a number of things in the page to calculate the correct animation.

I propose instead using the standard scroll-behavior CSS property to obtain a similar effect. Switching to scroll-behavior would eliminate all the above issues, while reducing the implementation to a single line of CSS:

html {
  scroll-behavior: smooth;
}
This could be disabled for the purpose of other animations where the effect is not desirable (e.g. showing and closing modals) by adding/removing a single CSS class to the body:

.disable-smooth-scrolling {
  scroll-behavior: auto;
}
The downside of this approach is that it's not supported by all browsers, but given that this is a small visual improvement, I think it would fall squarely in the category of progressive enhancement, for which a standard behaviour fallback is acceptable, and preferable to the JS-based approach.

[sami.keijonen]

+100 for this.

Important comment about ​disabling smooth scroll if user have asked for it.

[joostdevalk]

+100 from me too, the current behavior is broken, as per this bug: #48763

[SergeyBiryukov]

In 46824:

Twenty Twenty: Replace Smooth Scroll JS implementation with scroll-behavior CSS property.

The JS implementation had multiple issues and did not work as expected.

This change includes an accessibility enhancement by using prefers-reduced-motion: reduce media query property for users that don't want motion effects. For further explanation on this media query, see MDN documentation: ​https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#Accessibility_concerns

Props audrasjb, melchoyce, joostdevalk, Anlino, mauteri, sergiomdgomes, littlebigthing, williampatton, netweb, andraganescu, joyously, acosmin, mukesh27, hareesh-pillai.
Fixes #48763, #48551, #48866.

[SergeyBiryukov]

In 46825:

Twenty Twenty: Replace Smooth Scroll JS implementation with scroll-behavior CSS property.

The JS implementation had multiple issues and did not work as expected.

This change includes an accessibility enhancement by using prefers-reduced-motion: reduce media query property for users that don't want motion effects. For further explanation on this media query, see MDN documentation: ​https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#Accessibility_concerns

Props audrasjb, melchoyce, joostdevalk, Anlino, mauteri, sergiomdgomes, littlebigthing, williampatton, netweb, andraganescu, joyously, acosmin, mukesh27, hareesh-pillai.
Merges [46824] to the 5.3 branch.
Fixes #48763, #48551, #48866.

[audrasjb]

Dev note published on Make/Core: ​https://make.wordpress.org/core/2019/12/08/twenty-twenty-animated-scroll-changes-in-wordpress-5-3-1/