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 (