diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index 1d706774..aabb74da 100644 --- a/src/components/Page/Page.js +++ b/src/components/Page/Page.js @@ -27,6 +27,13 @@ const twitterPageURL = siteTwitterHandle => { }; class PageComponent extends Component { + constructor(props) { + super(props); + // Keeping scrollPosition out of state reduces rendering cycles (and no bad states rendered) + this.scrollPosition = 0; + this.contentDiv = null; + } + componentDidMount() { // By default a dropped file is loaded in the browser window as a // file URL. We want to prevent this since it might loose a lot of @@ -41,6 +48,16 @@ class PageComponent extends Component { document.removeEventListener('drop', preventDefault); } + componentWillReceiveProps(nextProps) { + const scrollingDisabled = nextProps.scrollingDisabled; + const scrollingDisabledHasChanged = scrollingDisabled !== this.props.scrollingDisabled; + + if (scrollingDisabled && scrollingDisabledHasChanged) { + // Update current scroll position, if scrolling is disabled (e.g. modal is open) + this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop; + } + } + render() { const { className, @@ -147,6 +164,19 @@ class PageComponent extends Component { }, ]); + const scrollPositionStyles = scrollingDisabled + ? { marginTop: `${-1 * this.scrollPosition}px` } + : {}; + + // If scrolling is not disabled, but content element has still scrollPosition set + // in style attribute, we scrollTo scrollPosition. + const hasMarginTopStyle = this.contentDiv && this.contentDiv.style.marginTop; + if (!scrollingDisabled && hasMarginTopStyle) { + window.requestAnimationFrame(() => { + window.scrollTo(0, this.scrollPosition); + }); + } + return (
{schemaArrayJSONString} -
{children}
+
{ + this.contentDiv = c; + }} + > + {children} +
); }