Changeset 46824

Timestamp:

12/07/2019 11:03:09 AM (5 years ago)

Author:

SergeyBiryukov

Message:

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.

Location:

trunk/src/wp-content/themes/twentytwenty

Files:

• assets/js/index.js (modified) (3 diffs)
• style-rtl.css (modified) (1 diff)
• style.css (modified) (1 diff)

trunk/src/wp-content/themes/twentytwenty/assets/js/index.js

@@ -324 +324 @@
 
 /*  -----------------------------------------------------------------------------------------------
-    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
 --------------------------------------------------------------------------------------------------- */
@@ -746 +654 @@
     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
@@ -892 +799 @@
     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();
-}

trunk/src/wp-content/themes/twentytwenty/style-rtl.css

@@ -116 +116 @@
 html {
     font-size: 62.5%; /* 1rem = 10px */
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
 }
 

trunk/src/wp-content/themes/twentytwenty/style.css

@@ -116 +116 @@
 html {
     font-size: 62.5%; /* 1rem = 10px */
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
 }