Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rjsparks merged 5 commits into from
May 18, 2022
+14 −5
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8d0c7ee
fix: Debounce the scroll event, to make Chrome happy
larseggert May 13, 2022
63f1750
Address review comments
larseggert May 15, 2022
9f4bd5a
fix: Prevent overscrolling from scrolling the main content
larseggert May 16, 2022
df66e31
Merge branch 'main' into fix-3893
rjsparks May 18, 2022
5b007fe
Merge branch 'main' into fix-3893
rjsparks May 18, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .pnp.cjs
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions ietf/static/css/ietf.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
12 changes: 8 additions & 4 deletions ietf/static/js/ietf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down