From a9b0c6804b8c3d5cab291858a7505f4e83107056 Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Sat, 4 Jun 2016 10:39:24 +0300
Subject: [PATCH] #139: preserve scrollTop, after open-close popup

---
 src/components/ui/scrollTo.js | 6 +++---
 src/index.js                  | 9 +++++++--
 src/index.scss                | 1 +
 src/pages/root/RootPage.jsx   | 2 +-
 src/pages/root/root.scss      | 7 +++++++
 5 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/scrollTo.js b/src/components/ui/scrollTo.js
index e95ed23..9b343f7 100644
--- a/src/components/ui/scrollTo.js
+++ b/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;
     });
 }
 
diff --git a/src/index.js b/src/index.js
index ec4ebce..2fc9cdd 100644
--- a/src/index.js
+++ b/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);
 }
 
diff --git a/src/index.scss b/src/index.scss
index 085f137..ca377f9 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -14,6 +14,7 @@ body {
     background: $light;
     color: #444;
     font-size: 16px;
+    overflow: hidden;
 }
 
 b {
diff --git a/src/pages/root/RootPage.jsx b/src/pages/root/RootPage.jsx
index 1a76097..a530881 100644
--- a/src/pages/root/RootPage.jsx
+++ 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}>
diff --git a/src/pages/root/root.scss b/src/pages/root/root.scss
index 6ccef14..34c8c85 100644
--- a/src/pages/root/root.scss
+++ b/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 {