#139: preserve scrollTop, after open-close popup

src/components/ui/scrollTo.js

@@ -8,9 +8,9 @@ const requestAnimationFrame = window.requestAnimationFrame || window.mozRequestA
     || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 
 const TIME_CONSTANT = 100;
-export default function scrollTo(y) {
+export default function scrollTo(y, viewPort) {
     const start = Date.now();
-    const {scrollTop} = document.body;
+    const {scrollTop} = viewPort;
     const amplitude = y - scrollTop;
 
     requestAnimationFrame(function animateScroll() {
@@ -24,7 +24,7 @@ export default function scrollTo(y) {
             delta = 0;
         }
 
-        window.scrollTo(0, y + delta);
+        viewPort.scrollTop = y + delta;
     });
 }
 

src/index.js

@@ -65,16 +65,21 @@ function restoreScroll() {
     setTimeout(() => {
         const id = hash.replace('#', '');
         const el = id ? document.getElementById(id) : null;
+        const viewPort = document.getElementById('view-port');
+
+        if (!viewPort) {
+            throw new Error('Can not find viewPort element');
+        }
 
         let y = 0;
         if (el) {
-            const {scrollTop} = document.body;
+            const {scrollTop} = viewPort;
             const {top} = el.getBoundingClientRect();
 
             y = scrollTop + top - SCROLL_ANCHOR_OFFSET;
         }
 
-        scrollTo(y);
+        scrollTo(y, viewPort);
     }, 100);
 }
 

src/index.scss

@@ -14,6 +14,7 @@ body {
     background: $light;
     color: #444;
     font-size: 16px;
+    overflow: hidden;
 }
 
 b {

src/pages/root/RootPage.jsx

@@ -14,7 +14,7 @@ import messages from './RootPage.intl.json';
 function RootPage(props) {
     return (
         <div className={styles.root}>
-            <div className={classNames(styles.root, {
+            <div id="view-port" className={classNames(styles.viewPort, {
                 [styles.isPopupActive]: props.isPopupActive
             })}>
                 <div className={styles.header}>

src/pages/root/root.scss

@@ -5,6 +5,13 @@ $userBarHeight: 50px;
 
 .root {
     height: 100%;
+    overflow: hidden;
+}
+
+.viewPort {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
 }
 
 .isPopupActive {