only update scroll position when page changes (#840)

this solves the overscroll issue we had previously (cuz page doesn't change) while also ensuring that the active section is always visible when the page loads. sidebar scrolls the active _page_ into view so you can see the entire layout, rather than just the active section!
palantir · Mar 15, 2017 · 4d16cd5 · 4d16cd5
1 parent bcce1c5
commit 4d16cd5
Showing 1 changed file with 17 additions and 11 deletions.
diff --git a/packages/docs/src/components/styleguide.tsx b/packages/docs/src/components/styleguide.tsx
@@ -146,7 +146,8 @@ export class Styleguide extends React.Component<IStyleguideProps, IStyleguideSta
     }
 
     public componentDidMount() {
-        this.maybeScrollActiveMenuItemIntoView(true);
+        this.scrollToActiveSection();
+        this.maybeScrollToActivePageMenuItem();
         this.props.onUpdate(this.state.activePageId);
         // whoa handling future history...
         window.addEventListener("hashchange", () => {
@@ -168,8 +169,13 @@ export class Styleguide extends React.Component<IStyleguideProps, IStyleguideSta
 
     public componentDidUpdate(_prevProps: IStyleguideProps, prevState: IStyleguideState) {
         const { activePageId, themeName } = this.state;
+
         // only scroll to heading when switching pages, but always check if nav item needs scrolling.
-        this.maybeScrollActiveMenuItemIntoView(prevState.activePageId !== activePageId);
+        if (prevState.activePageId !== activePageId) {
+            this.scrollToActiveSection();
+            this.maybeScrollToActivePageMenuItem();
+        }
+
         setHotkeysDialogProps({ className: themeName } as any as IHotkeysDialogProps);
         this.props.onUpdate(activePageId);
     }
@@ -203,22 +209,22 @@ export class Styleguide extends React.Component<IStyleguideProps, IStyleguideSta
         setTheme(themeName);
     }
 
-    private maybeScrollActiveMenuItemIntoView(alsoHeading: boolean) {
-        const { activeSectionId } = this.state;
-
-        if (alsoHeading) {
-            scrollToReference(activeSectionId, this.contentElement);
-        }
-
-        // only scroll nav menu if active item is not visible in viewport
-        const navMenuElement = queryHTMLElement(this.navElement, `a[href="#${activeSectionId}"]`);
+    private maybeScrollToActivePageMenuItem() {
+        const { activePageId } = this.state;
+        // only scroll nav menu if active item is not visible in viewport.
+        // using activePageId so you can see the page title in nav (may not be visible in document).
+        const navMenuElement = this.navElement.query(`a[href="#${activePageId}"]`);
         const innerBounds = navMenuElement.getBoundingClientRect();
         const outerBounds = this.navElement.getBoundingClientRect();
         if (innerBounds.top < outerBounds.top || innerBounds.bottom > outerBounds.bottom) {
             navMenuElement.scrollIntoView();
         }
     }
 
+    private scrollToActiveSection() {
+        scrollToReference(this.state.activeSectionId, this.contentElement);
+    }
+
     private shiftSection(direction: 1 | -1) {
         // use the current hash instead of `this.state.activeSectionId` to avoid cases where the
     	// active section cannot actually be selected in the nav (often a short one at the end).