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
– Fabian Schultz, Commented Oct 10, 2016 at 17:01

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

93

"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.

edited Nov 10, 2021 at 8:29

Stanislav Mayorov

4,4945 gold badges27 silver badges47 bronze badges

answered Oct 10, 2016 at 17:00

jered

11.6k2 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pourmesomecode Over a year ago

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.

Egon Stetmann. Over a year ago

there's no dom on nextjs

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

5 Comments

Raul Sauco Over a year ago

How does this answer the OP's question?

tonix Over a year ago

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?

Fiddle Freak Over a year ago

@RaulSauco I had to do a bit of playing around with it myself, check out my answer in this question.

János Over a year ago

tried body-scroll-lock does not worked for me

János Over a year ago

stackoverflow.com/questions/74971048/…

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

7,0128 gold badges71 silver badges97 bronze badges

answered Dec 1, 2022 at 5:10

john-weak

992 silver badges5 bronze badges

Comments

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 badge4 bronze badges

Comments

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

Comments

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

Comments

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

0

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;
}

edited Jul 7, 2022 at 17:21

answered Jul 7, 2022 at 17:16

Anton Kouliavtsev

997 bronze badges

Comments

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

3394 silver badges15 bronze badges

1 Comment

Hamilton Hardy Over a year ago

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.

Collectives™ on Stack Overflow

Prevent scrolling using CSS on React rendered components

9 Answers 9

2 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

5 Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related