Prevent scrolling using CSS on React rendered components

Question

So I render a component via React within my html like so:

 <html>
  <body>
    <div id=app>${appHtml}</div>
    <script src="/bundle.js"></script>
  </body>
</html>

Within my app I have a burger button, that onClick goes full screen.

However, the body is scrollable. I'd normally add a class to the body tag and make it overflow: hidden to prevent this. However, my react component is rendered within the body tag so I have no control over toggling classes based on a click within a react component.

Has anyone got any ideas/advice on how i'd achieve what i'm looking for.

Thanks!

Possible duplicate of When, where and how to add class to the document.body when using React.js — Fabian Schultz, Commented Oct 10, 2016 at 17:01

Stanislav Mayorov · Accepted Answer · 2021-11-10 08:29:06Z

"I have no control over toggling classes based on a click within a react component."

Not necessarily true!

It's good that you're thinking in a "React-ful" way and wary about modifying the DOM. The main reason you want to avoid doing DOM manipulation is because it causes conflicts between what React is trying to render and the unknown changes you might be trying to make. But in this case you're not manipulating the DOM that React is rendering, you're manipulating its parent. In that case you would be totally fine doing something like this:

document.body.style.overflow = "hidden"

Or

document.body.classList.add("no-scroll")

Or whatever works. You're totally safe because React only renders the DOM within #app and doesn't care about what happens in its parent. In fact many apps and websites use React in only a small part of the page, to render a single component or widget, instead of an entire app.

That aside, there is an even better, more "React-ful" way to do what you want. Simply restructure your app in such a way that the scrolling container is within your React app instead of body. The structure might look something like this:

<html>
  <body>
    <div id="app">
      <div id="scroll-container">
        <!-- the rest of your app -->
      </div>
    </div>
  </body>
</html>

Make body overflow hidden, and body and #app fill the entire screen, and you can control whether #scroll-container allows scrolling or not entirely within React.

Thanks man! I actually thought react would just complain if you tried to change anything outside it's component. I never knew you could still do that. — pourmesomecode, Commented Oct 10, 2016 at 20:29

Will Po · Accepted Answer · 2018-02-18 11:27:29Z

8

The above doesn't work for iOS mobile.

body-scroll-lock uses a combination of CSS and JS to make it work for all devices, whilst maintaining scrollability of a target element (eg. modal).

ie. for iOS, need to detect when the bottom or top of a target element is reached, and then stop scrolling completely

answered Feb 18, 2018 at 11:27

Will Po

2213 silver badges4 bronze badges

3

How does this answer the OP's question?
– Raul Sauco
Commented Feb 18, 2018 at 11:55
Does body-scroll-lock let you to prevent a parent element to scroll when its child has been scrolled all way down to the bottom or to the top?
– tonix
Commented Jul 8, 2019 at 10:38
@RaulSauco I had to do a bit of playing around with it myself, check out my answer in this question.
– Fiddle Freak
Commented Mar 29, 2021 at 12:54
tried body-scroll-lock does not worked for me
– János
Commented Dec 31, 2022 at 17:09
stackoverflow.com/questions/74971048/…
– János
Commented Dec 31, 2022 at 17:14

Add a comment |

Dipak · Accepted Answer · 2023-10-01 14:46:37Z

5

use React.useEffect() hook to disable scrolling on a specific page then cleanup. e.g

useEffect(() => {
    document.body.style.overflow = "hidden";
    return () => {
        document.body.style.overflow = "scroll"
    };
}, []);

edited Oct 1, 2023 at 14:46

Dipak

6,9708 gold badges69 silver badges96 bronze badges

answered Dec 1, 2022 at 5:10

john-weak

992 silver badges5 bronze badges

Add a comment |

Fiddle Freak · Accepted Answer · 2021-03-29 12:51:25Z

Here is how to use the body-scroll-lock library with reactjs...

import React, {useState} from 'react';
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';

// Components
import Hamburger from './HeaderComponents/Hamburger.js';
import MegaDropdown from './HeaderComponents/MegaDropdown.js';

const Header = props => {
  // variables
  const [isSideNavShown, setIsSideNavShown] = useState(false);
  const [isDropdownShowing, setIsDropdownShowing] = useState(false);

  isDropdownShowing ? disableBodyScroll(document) : enableBodyScroll(document)

  return (
    <header className="header">
      <Hamburger isDropdownShowing={isDropdownShowing} setIsDropdownShowing={setIsDropdownShowing} />
      <MegaDropdown isDropdownShowing={isDropdownShowing} setIsDropdownShowing={setIsDropdownShowing} />
    </header>
  )
}

export default Header;

in particular the line isDropdownShowing ? disableBodyScroll(document) : enableBodyScroll(document)

This allows for when the content in my dropdown fills up to the point where it needs to add a scroll to it, the window(body) scroll is disabled while the dropdown is showing(covering my whole screen). So even though the window(body) scroll is disabled, I can still scroll through my dropdown.

Carlos Junod · Accepted Answer · 2022-10-16 14:45:32Z

2

a very simple way to achieve this in a functional components with Hooks (React 16.8 +) is using useEffect to perform side effects.

  useEffect(() => {
    const html = document.querySelector("html");
    if (html) {
      html.style.overflow = state.isMenuOpen ? "hidden" : "auto";
    }
  }, [state.isMenuOpen]); // condition to watch to perform side effect

answered Oct 16, 2022 at 14:45

Carlos Junod

211 silver badge3 bronze badges

Add a comment |

TLamp · Accepted Answer · 2021-05-29 09:06:04Z

1

Here's my two cents: you can set the height of div containing your content to 100% ( height: 100%) Or in this case body { height: 100%}

answered May 29, 2021 at 9:06

TLamp

1213 bronze badges

Add a comment |

Niklas Rotter · Accepted Answer · 2021-06-05 20:30:02Z

1

I would suggest using css position: "sticky" , but I guess that's not what is questioned here. But it worked for me. The other solutions are better I guess.

answered Jun 5, 2021 at 20:30

Niklas Rotter

476 bronze badges

Add a comment |

Anton Kouliavtsev · Accepted Answer · 2022-07-07 17:21:08Z

Wrote a tiny hook to handle the body scroll.

import { useState, useEffect } from "react";

export default function useSetBodyScroll() {
  const [bodyScroll, setBodyScroll] = useState(true);

  useEffect(() => {
    const resetOnResize = () => {
      if (window.innerWidth <= 1023) document.body.style.overflow = "hidden";
      if (window.innerWidth >= 1024) document.body.style.overflow = "scrolls";
    };

    if (!bodyScroll) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "scroll";
      window.addEventListener("resize", resetOnResize);
    }

    return () => {
      window.removeEventListener("resize", resetOnResize);
    };
  }, [bodyScroll]);

  return setBodyScroll;
}

Gipfeli · Accepted Answer · 2022-09-25 16:33:13Z

0

On Next.JS you can use:

const html = document.querySelector('html');
if (html) {
  html.style.overflow = 'hidden';
}

And you can reset it with:

const html = document.querySelector('html');
if (html) {
  html.style.overflow = 'auto';
}

answered Sep 25, 2022 at 16:33

Gipfeli

3194 silver badges14 bronze badges

This worked for me. As far as I can tell there is no way to dynamically update the styling of the <html> tag of the root layout in the Next.js app router unless you wanted to pass a ref all the way down the the component that needed it. @Gipfeli would this affect other pages that use the same root layout? The useEffect hook might be important here.
– Hamilton Hardy
Commented Mar 19, 2024 at 16:12

Add a comment |

Collectives™ on Stack Overflow

Prevent scrolling using CSS on React rendered components

9 Answers 9

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Linked

Related