Question

所以我在html中通过React渲染组件，如此：

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

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

然而，身体是可滚动的。我通常会在body标记中添加一个类，并将其设为overflow: hidden以防止这种情况发生。但是，我的react组件在body标记内呈现，因此我无法根据反应组件中的单击来控制切换类。

有没有人对我如何实现我正在寻找的东西有任何想法/建议。

谢谢！

Answer 1

“我根据反应组件中的点击无法控制切换类。”

不一定是真的！

以“反应”的方式思考并且对修改DOM持谨慎态度是件好事。您希望避免执行DOM操作的主要原因是，它会导致React尝试呈现的内容与您可能尝试进行的未知更改之间发生冲突。但是在这种情况下，你不是在操纵React正在渲染的DOM，而是在操纵它的父。在这种情况下，你会完全没有这样做：

document.body.style.overflow = "hidden"

或者

document.body.classList.add("no-sroll")

或者无论如何。你完全安全，因为React只在#app内呈现DOM而不关心其父级中发生的事情。实际上，许多应用程序和网站仅在页面的一小部分中使用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内完全滚动。

Answer 2

以上版本不适用于iOS手机。

body-scroll-lock使用CSS和JS的组合使其适用于所有设备，同时保持目标元素的可滚动性（例如模态）。

即。对于iOS，需要检测何时到达目标元素的底部或顶部，然后完全停止滚动

Answer 3

这里是如何在 reactjs 中使用 body-scroll-lock 库...

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;

特别是行 isDropdownShowing ? disableBodyScroll(document) : enableBodyScroll(document)

这允许当我的下拉列表中的内容填满到需要向其添加滚动的点时，在显示下拉列表（覆盖我的整个屏幕）时禁用窗口（主体）滚动。所以即使窗口（主体）滚动被禁用，我仍然可以滚动我的下拉菜单。

Answer 4

这是我的两分钱：您可以将包含您的内容的 div 的高度设置为 100%（高度：100%）或者在这种情况下 body { height: 100%}

Answer 5

我建议使用 css position: "sticky" ，但我想这不是这里所质疑的。但它对我有用。我想其他解决方案更好。

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

5 个答案: