react-toolbox: body overflow:scroll issue on new Portal.js HOC Overlay

In the new HOC (react-toolbox/components/hoc/Portal.js), the unrenderOverlay method causes a horizontal scrollbar to appear unnecessarily in at least Google Chrome. Furthermore, because it appears as an inline style, it’s specificy wins. In the code below, document.body.style.overflow needs to be set to null instead of ‘scroll’. I am happy to submit this fix as a pull request. Am I missing something that requires the body style to be set to scroll?

 _unrenderOverlay () {
    if (this._overlayTarget) {
      if (this.props.lockBody) document.body.style.overflow = 'scroll';
      ReactDOM.unmountComponentAtNode(this._overlayTarget);
      this._overlayInstance = null;
    }
  }

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 1
  • Comments: 15 (10 by maintainers)

Most upvoted comments

@javivelasco @jasonkylefrank

In the short term why aren’t we just changing document.body.style.overflow = 'scroll'; to document.body.style.removeProperty('overflow')

Or alternatively check what the property was previously, store it then make it

originalOverflowProperty ? document.body.style.overflow = originalOverflowProperty : document.body.style.removeProperty('overflow')

Happy to make PR for that change.

Hadn’t heard anything so went ahead and made a PR. Feedback is welcome.