Avoid Scroll Below Stuck Navigation

Question

Avoid Scroll Below Stuck Navigation

I've been searching for a solution to my issue for some time now, and while I've come across many articles discussing similar problems, none of them seem to address my specific problem.

In my React app, I have a mobile version where users can tap on a hamburger menu to open a navigation menu. The navigation menu occupies 80vw and 100vh of the screen. However, users are still able to scroll through the background application by swiping the nav menu for some reason.

Below is the styling for my mobile navigation:

.mobileNav {
  height: 100vh;
  width: 0vw;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #1d1d1d;
  z-index: 999;
  will-change: transform;

  -webkit-transition: 0.75s;
  -moz-transition: 0.75s;
  -ms-transition: 0.75s;
  -o-transition: 0.75s;
  transition: width 0.75s;

  &--open {
    width: 80vw;
  }
}

I've attempted setting position: fixed or overflow: hidden on the parent element when the navBar is opened to prevent scrolling. However, this action also causes the user to jump back to the top of the page, which is not ideal.

You can view my code on codesandbox here.

javascript html css reactjs

Answer 1

Answer №1

Greetings, it appears that this is the standard behavior. To prevent the background from scrolling when the modal is open, you will need to implement some code. For more information, check out this helpful resource: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/

Answer 2

Greetings, it appears that this is the standard behavior. To prevent the background from scrolling when the modal is open, you will need to implement some code. For more information, check out this helpful resource: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/

Answer 3

Answer №2

const App = () => {
  const [isNavOpen, setIsNavOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = isNavOpen ? "hidden" : "auto";
  }, [isNavOpen]);

  return (
    <div className="App">
      <NavMenu isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen} />
      <div className={styles.red}>
        Howdy <button onClick={() => setIsNavOpen(true)}>Launch</button>
      </div>
      <div className={styles.blue}>Greetings</div>
      <div className={styles.green}>Hola</div>
    </div>
  );
};

export default App;

The useEffect function triggers each time the navigation modal switches between open and closed states. When it's closed, body scrolling is allowed. When it's open, body scrolling is disabled.

Answer 4

const App = () => {
  const [isNavOpen, setIsNavOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = isNavOpen ? "hidden" : "auto";
  }, [isNavOpen]);

  return (
    <div className="App">
      <NavMenu isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen} />
      <div className={styles.red}>
        Howdy <button onClick={() => setIsNavOpen(true)}>Launch</button>
      </div>
      <div className={styles.blue}>Greetings</div>
      <div className={styles.green}>Hola</div>
    </div>
  );
};

export default App;

The useEffect function triggers each time the navigation modal switches between open and closed states. When it's closed, body scrolling is allowed. When it's open, body scrolling is disabled.

Avoid Scroll Below Stuck Navigation

Answer №1

Answer №2

Similar questions

Automatically scraping Facebook API data with PHP

Utilizing shared state in React components through props

Is there a way to differentiate between render() being triggered by an explicit setState() invocation or by the parent component passing props to it?

Primeng - Concealed dropdown values within a scrollable table header

"Execution of the console.log statement occurs following the completion of the request handling

Having issues when dynamically adding options to a multiselect dropdown

Issues arise with React during the installation of styled-components

The Angular build is unsuccessful due to the presence of components from a separate Angular project

Assistance needed for adjusting margins and padding within the inner content box

"Explore the convenience of viewing two separate videos on one webpage, each in its own

How can you set the listbox in Sumo Select to always be open?

Troubles with Geocoding functionality on Google Maps integration within Wordpress

I am looking to modify various attributes linked to Rails

Using AngularJS date picker to set value in Spring model setter

Group an object by its name using Java Script/Vue.Js

Encountered a surprise hiccup while attempting to upload file to AWS S3 using browser (putObject

Managing the AJAX response from a remote CGI script

Oops! You can't switch to `multiple` mode on a select dropdown once it has already

Achieving JSON element sorting in the most effective way

What is the best way to incorporate plugins designed for various jQuery versions onto a single webpage?