Menu
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!
414
Disabling scroll with only CSS. There's another way to disable scrolling that is commonly used when opening modals or scrollable floating elements. And it is simply by adding the CSS property overflow: hidden; on the element you want to prevent the scroll.
U need to set window. scrollTo(0, 0) when u click on link so it would start on top of page.
mouseleave(function() { $('body'). bind('mousewheel DOMMouseScroll', function() { return true; }); }); This is stopping all scrolling where as I want scrolling to still be possible inside the container.
"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.
89
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
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
