From 4d16cd595b6c33f28d5e0f3606b14b9fbefcb6ab Mon Sep 17 00:00:00 2001
From: Gilad Gray <giladgray@gmail.com>
Date: Wed, 15 Mar 2017 11:37:54 -0700
Subject: [PATCH] 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!
---
 packages/docs/src/components/styleguide.tsx | 28 +++++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/docs/src/components/styleguide.tsx b/packages/docs/src/components/styleguide.tsx
index 35f28f3ce0..cf2ecbc6ca 100644
--- 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,15 +209,11 @@ 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) {
@@ -219,6 +221,10 @@ export class Styleguide extends React.Component<IStyleguideProps, IStyleguideSta
         }
     }
 
+    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).