CODEWITHSUNDEEP
javascripthtmlcssreactjs
pourmesomecode
pourmesomecode

Reputation: 4338

Prevent scrolling using CSS on React rendered components

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!

Upvotes: 54

Views: 164403

Answers (9)

john-weak
john-weak

Reputation: 99

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"
    };
}, []);

Upvotes: 5

Carlos Junod
Carlos Junod

Reputation: 21

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

Upvotes: 2

Gipfeli
Gipfeli

Reputation: 319

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

Upvotes: 0

Anton Kouliavtsev
Anton Kouliavtsev

Reputation: 99

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

Upvotes: 0

jered
jered

Reputation: 11581

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

Upvotes: 89

Niklas Rotter
Niklas Rotter

Reputation: 47

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.

Upvotes: 1

TLamp
TLamp

Reputation: 121

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

Upvotes: 1

Fiddle Freak
Fiddle Freak

Reputation: 2041

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.

Upvotes: 4

Will Po
Will Po

Reputation: 221

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

Upvotes: 8

Related Questions