Wrapped Page Is Still Scrollable

Currently with an implementation like the following: App:

      <div id="outer-container" className="forecast-page-container">
        <Menu
          pageWrapId={'page-wrap'}
          outerContainerId={'outer-container'}
          options={this.regions}
          {...this.props}
        />
        <div id="page-wrap" className={'forecast-page full-width'}>
          <Navbar />
          <ForecastPage {...this.props} />
        </div>
      </div>

Menu:

      <ReduxBurgerMenu
        pageWrapId={this.props.pageWrapId}
        outerContainerId={this.props.outerContainerId}
        isOpen={this.props.burgerMenu.isOpen}
        right
        customBurgerIcon={false}
      >
        .... Some items in the menu
      </ReduxBurgerMenu>

When the menu is open I am still able to scroll the page-wrap div element. Since I have a list of items in my menu, and it is scrollable this creates a really weird interaction.

Is there any way to lock the scrolling on the page-wrap item.

[zeckdude]

Thanks to @monsonjeremy’s suggestion, I followed the same approach, since I wasn’t able to get any of the other suggestions to work.

In case anyone finds value, here’s my code snippet:

componentDidUpdate(prevProps, prevState) {
  // If the hamburger menu is open, disable scrolling on the site
  if (prevState.menuOpen !== this.state.menuOpen) {
    if (this.state.menuOpen) {
      // overflow:hidden disables the scrolling on a desktop browser
      // position: fixed is additionally needed for mobile devices
      document.body.setAttribute("style", "overflow: hidden; position: fixed;");
    } else {
      document.body.setAttribute("style", "overflow: visible; position: static;");
    }
  }
}

[monsonjeremy]

Thanks for the reply @negomi, I ended up finding a workaround by checking the state of the menu and if it is open I set the Document Body style to have overflow: hidden.

This seems like a hacky workaround, but for some reason setting overflow: hidden on the page wrap element wasn’t doing it. I have the overlay as well so i’m not sure why.

Here are the relevant files if you want to take a look:

Component where I put items in the menu: https://github.com/monsonjeremy/Forecast-Me/blob/master/client/src/components/SpotSelectDrawer.jsx

Container where i do the page-wrap: https://github.com/monsonjeremy/Forecast-Me/blob/master/client/src/containers/ForecastPageContainer.jsx

ReduxBurgerMenu container: https://github.com/monsonjeremy/Forecast-Me/blob/master/client/src/containers/ReduxBurgerMenu.jsx