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

Converting JSON arrays to integers from strings in JavaScript: A step-by-step guide

Error: The script is not found in the package.json configuration

Updating a nested property within an array of objects in MongoDB

Transform the functional based implementation of Material UI React Autosuggest into a class component based implementation

Having trouble loading items in a <select> tag with Jquery?

Panel with Bootstrap Collapse feature causes a slight movement when padding is applied

Verify modifications prior to navigating in React or Next.js

Identify which browsers are compatible with HTML5 video autoplay detection

Can you explain the significance of "q" and "+" within the CSS properties of the HTML body tag?

Updating the appearance of a non-declared HTML child component on-the-fly using Angular

Angular 14: Exploring the left datepicker panel navigation in PrimeNG

Having trouble sending a function as a prop to a child component in React

Angular directive for automatically selecting a <select> value when there is only one option available in ngOptions

Leveraging the power of Google Closure Templates alongside the versatility of

The MUI5 drawer overlapping a modal dialog

Animation in CSS/transform drifting out of view

Issue: Unable to locate element with the specified selector: #email

The loop feature in Swiper.js seems to be malfunctioning and not functioning as

Mastering file/image transfer between a React frontend and a node.js backend

Using CSS to customize the appearance of the preview in CKEditor