fix(ui): debounce the scroll event to make chrome happy (#3958)

* fix: Debounce the scroll event, to make Chrome happy

* Address review comments

* fix: Prevent overscrolling from scrolling the main content

Co-authored-by: Robert Sparks <rjsparks@nostrum.com>

.pnp.cjs

@@ -53,6 +53,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["jquery-ui-dist", "npm:1.13.1"],\
             ["js-cookie", "npm:3.0.1"],\
             ["list.js", "npm:2.3.1"],\
+            ["lodash", "npm:4.17.21"],\
             ["moment", "npm:2.29.3"],\
             ["moment-timezone", "npm:0.5.34"],\
             ["parcel", "npm:2.5.0"],\
@@ -5162,6 +5163,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["jquery-ui-dist", "npm:1.13.1"],\
             ["js-cookie", "npm:3.0.1"],\
             ["list.js", "npm:2.3.1"],\
+            ["lodash", "npm:4.17.21"],\
             ["moment", "npm:2.29.3"],\
             ["moment-timezone", "npm:0.5.34"],\
             ["parcel", "npm:2.5.0"],\

ietf/static/css/ietf.scss

@@ -177,6 +177,7 @@ table tbody.meta {
 #righthand-nav {
     height: 70vh;
     width: inherit;
+    overscroll-behavior-y: none; // Prevent overscrolling from scrolling the main content
 }
 
 // Add some padding when there are multiple buttons in a line than can wrap

ietf/static/js/ietf.js

@@ -24,6 +24,8 @@ if (!process.env.BUILD_DEPLOY) {
 
 import Cookies from "js-cookie";
 
+import debounce from "lodash/debounce";
+
 // setup CSRF protection using jQuery
 function csrfSafeMethod(method) {
     // these HTTP methods do not require CSRF protection
@@ -244,15 +246,17 @@ $(function () {
                 extraNav.remove();
             }
 
-            $(window)
-                .on("scroll", function () {
+            $(document)
+                // Chrome apparently wants this debounced to something >10ms,
+                // otherwise the main view doesn't scroll?
+                .on("scroll", debounce(function () {
                     const item = $('#righthand-nav')
                         .find(".active")
                         .last();
                     if (item.length) {
-                        item[0].scrollIntoView({ block: "center" });
+                        item[0].scrollIntoView({ block: "center", behavior: "smooth" });
                     }
-                });
+                }, 100));
 
             // offset the scrollspy to account for the menu bar
             const contentOffset = contentElement ? contentElement.offset().top : 0;

package.json

@@ -18,6 +18,7 @@
     "jquery-ui-dist": "1.13.1",
     "js-cookie": "3.0.1",
     "list.js": "2.3.1",
+    "lodash": "4.17.21",
     "moment": "2.29.3",
     "moment-timezone": "0.5.34",
     "select2": "4.1.0-rc.0",

yarn.lock

@@ -3409,7 +3409,7 @@ browserlist@latest:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.17.21":
+"lodash@npm:4.17.21, lodash@npm:^4.17.21":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: eb835a2e51d381e561e508ce932ea50a8e5a68f4ebdd771ea240d3048244a8d13658acbd502cd4829768c56f2e16bdd4340b9ea141297d472517b83868e677f7
@@ -4284,6 +4284,7 @@ browserlist@latest:
     jquery-ui-dist: 1.13.1
     js-cookie: 3.0.1
     list.js: 2.3.1
+    lodash: 4.17.21
     moment: 2.29.3
     moment-timezone: 0.5.34
     parcel: 2.5.0