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.
Built from https://develop.svn.wordpress.org/trunk@46824


git-svn-id: http://core.svn.wordpress.org/trunk@46624 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2019-12-07 11:05:01 +00:00
parent f93ee2ca76
commit 0f971e68ec
4 changed files with 15 additions and 140 deletions

View File

@ -322,98 +322,6 @@ twentytwenty.intrinsicRatioVideos = {
}; // twentytwenty.instrinsicRatioVideos
/* -----------------------------------------------------------------------------------------------
Smooth Scroll
--------------------------------------------------------------------------------------------------- */
twentytwenty.smoothScroll = {
init: function() {
// Scroll to anchor
this.scrollToAnchor();
// Scroll to element
this.scrollToElement();
},
// Scroll to anchor
scrollToAnchor: function() {
var anchorElements = document.querySelectorAll( 'a[href*="#"]' );
var anchorElementsList = Array.prototype.slice.call( anchorElements );
anchorElementsList.filter( function( element ) {
if ( element.href === '#' || element.href === '#0' || element.id === 'cancel-comment-reply-link' || element.classList.contains( 'do-not-scroll' ) || element.classList.contains( 'skip-link' ) ) {
return false;
}
return true;
} ).forEach( function( element ) {
element.addEventListener( 'click', function( event ) {
var target, scrollOffset, originalOffset, adminBar, scrollSpeed, additionalOffset;
// On-page links
if ( window.location.hostname === event.target.hostname ) {
// Figure out element to scroll to
target = window.location.hash !== '' && document.querySelector( window.location.hash );
target = target ? target : event.target.hash !== '' && document.querySelector( event.target.hash );
// Does a scroll target exist?
if ( target ) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
// Get options
additionalOffset = event.target.dataset.additionalOffset;
scrollSpeed = event.target.dataset.scrollSpeed ? event.target.dataset.scrollSpeed : 500;
// Determine offset
adminBar = document.querySelector( '#wpadminbar' );
originalOffset = target.getBoundingClientRect().top + window.pageYOffset;
scrollOffset = additionalOffset ? originalOffset + additionalOffset : originalOffset;
if ( adminBar && event.target.className === 'to-the-top' ) {
scrollOffset = scrollOffset - adminBar.getBoundingClientRect().height;
}
twentytwentyScrollTo( scrollOffset, null, scrollSpeed );
window.location.hash = event.target.hash.slice( 1 );
}
}
} );
} );
},
// Scroll to element
scrollToElement: function() {
var scrollToElement = document.querySelector( '*[data-scroll-to]' );
if ( scrollToElement ) {
scrollToElement.addEventListener( 'click', function( event ) {
var originalOffset, additionalOffset, scrollOffset, scrollSpeed,
// Figure out element to scroll to
target = event.target.dataset.twentytwentyScrollTo;
// Make sure said element exists
if ( target ) {
event.preventDefault();
// Get options
additionalOffset = event.target.dataset.additionalOffset;
scrollSpeed = event.target.dataset.scrollSpeed ? event.target.dataset.scrollSpeed : 500;
// Determine offset
originalOffset = target.getBoundingClientRect().top + window.pageYOffset;
scrollOffset = additionalOffset ? originalOffset + additionalOffset : originalOffset;
twentytwentyScrollTo( scrollOffset, null, scrollSpeed );
}
} );
}
}
}; // twentytwenty.smoothScroll
/* -----------------------------------------------------------------------------------------------
Modal Menu
--------------------------------------------------------------------------------------------------- */
@ -745,7 +653,6 @@ twentytwentyDomReady( function() {
twentytwenty.toggles.init(); // Handle toggles
twentytwenty.coverModals.init(); // Handle cover modals
twentytwenty.intrinsicRatioVideos.init(); // Retain aspect ratio of videos on window resize
twentytwenty.smoothScroll.init(); // Smooth scroll to anchor link or a specific element
twentytwenty.modalMenu.init(); // Modal Menu
twentytwenty.primaryMenu.init(); // Primary Menu
twentytwenty.touchEnabled.init(); // Add class to body if device is touch-enabled
@ -891,49 +798,3 @@ function twentytwentyFindParents( target, query ) {
return parents;
}
// twentytwentyEaseInOutQuad functions http://goo.gl/5HLl8
function twentytwentyEaseInOutQuad( t, b, c, d ) {
t /= d / 2;
if ( t < 1 ) {
return ( ( ( c / 2 ) * t ) * t ) + b;
}
t--;
return ( ( -c / 2 ) * ( ( t * ( t - 2 ) ) - 1 ) ) + b;
}
function twentytwentyScrollTo( to, callback, duration ) {
var start, change, increment, currentTime;
function move( amount ) {
document.documentElement.scrollTop = amount;
document.body.parentNode.scrollTop = amount;
document.body.scrollTop = amount;
}
start = document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop;
change = to - start;
increment = 20;
currentTime = 0;
duration = ( typeof ( duration ) === 'undefined' ) ? 500 : duration;
function animateScroll() {
var val;
// increment the time
currentTime += increment;
// find the value with the quadratic in-out twentytwentyEaseInOutQuad function
val = twentytwentyEaseInOutQuad( currentTime, start, change, duration );
// move the document.body
move( val );
// do the animation unless its over
if ( currentTime < duration ) {
window.requestAnimationFrame( animateScroll );
} else if ( callback && typeof ( callback ) === 'function' ) {
// the animation is done so lets callback
callback();
}
}
animateScroll();
}

View File

@ -115,6 +115,13 @@ blockquote::after {
html {
font-size: 62.5%; /* 1rem = 10px */
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {

View File

@ -115,6 +115,13 @@ blockquote::after {
html {
font-size: 62.5%; /* 1rem = 10px */
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body {

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.4-alpha-46823';
$wp_version = '5.4-alpha-46824';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.