小编典典

防止在React渲染的组件上使用CSS滚动

reactjs

所以我html像这样通过React在内部渲染一个组件:

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

在我的应用程序中,我有一个汉堡按钮,该按钮onClick全屏显示。

但是,主体是可滚动的。我通常将一个类添加到body标签中,并使其overflow: hidden防止出现这种情况。但是,我的react组件显示在body标记中,因此我无法控制基于react组件内单击的切换类。

有没有人对我要实现的目标有任何想法/建议。

谢谢!


阅读 275

收藏
2020-07-22

共1个答案

小编典典

“我无法控制基于React组件中单击的切换类。”

不一定是真的!

最好以“反应灵敏”的方式思考,并且对修改DOM保持警惕。您想要避免进行DOM操作的主要原因是因为它导致React尝试呈现的内容与您可能试图进行的未知更改之间发生冲突。但是在这种情况下,您不是在操纵React正在渲染的DOM,而是在操纵它的
parent 。在这种情况下,您完全可以这样做:

document.body.style.overflow = "hidden"

要么

document.body.classList.add("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允许完全内无反应滚动与否。

2020-07-22