UX: Only `scrollIntoView` if sidebar items are not already visible (#28372)

When browsing through a sidebar with this feature enabled (i.e. admin, or docs), it's weird to have the scroll jump around when you click an item. This commit adds a check, so that we only `scrollIntoView` for items which are not already in the viewport.

Followup to b7cce1a0dc
This commit is contained in:
David Taylor 2024-08-14 15:58:11 +01:00 committed by GitHub
parent f6fadd7129
commit ede6220347
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 14 additions and 6 deletions

View File

@ -115,13 +115,21 @@ export default class SectionLink extends Component {
@bind
maybeScrollIntoView(element) {
if (this.args.scrollIntoView) {
schedule("afterRender", () => {
element.scrollIntoView({
block: "center",
});
});
if (!this.args.scrollIntoView) {
return;
}
schedule("afterRender", () => {
const rect = element.getBoundingClientRect();
const alreadyVisible = rect.top <= window.innerHeight && rect.bottom >= 0;
if (alreadyVisible) {
return;
}
element.scrollIntoView({
block: "center",
});
});
}
<template>