All geek questions in one place

CSS scrolling on React rendered components

So, I render the component through React inside mine htmllike this:

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

In my application, I have a hamburger button that onClickgoes full screen.

However, the body scrolls. I usually add a class to a tag bodyand make it overflow: hiddento prevent this. However, my response component is displayed in the tag body, so I can’t control the click-based class switching inside the react component.

Does anyone have any ideas / tips on how I would achieve what I am looking for.

Thank!

+4
source share
2 answers

" ".

!

, "" DOM. , DOM, , , React, , . DOM, React , . - :

document.body.style.overflow = "hidden"


document.body.className += " no-sroll"

. , React DOM #app , . , - React , , .

, , "" , . , React body. :

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

body, body #app , , #scroll-container React.

+7

iOS mobile.

body-scroll-lock CSS JS, , (, ).

. iOS , ,

0

Source: https://habr.com/ru/post/1657303/

More articles:


All Articles