Javascript 防止在 React 渲染组件上使用 CSS 滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39962757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent scrolling using CSS on React rendered components
提问by pourmesomecode
So I render a component via React within my htmllike so:
所以我在我的内部通过 React 渲染了一个组件html：
<html>
<body>
<div id=app>${appHtml}</div>
<script src="/bundle.js"></script>
</body>
</html>
Within my app I have a burger button, that onClickgoes full screen.
在我的应用程序中，我有一个汉堡按钮，onClick可以全屏显示。
However, the body is scrollable. I'd normally add a class to the bodytag and make it overflow: hiddento prevent this. However, my react component is rendered within the bodytag so I have no control over toggling classes based on a click within a react component.
但是，主体是可滚动的。我通常会在body标签中添加一个类并使其overflow: hidden防止发生这种情况。但是，我的 react 组件是在body标签内呈现的，因此我无法控制基于 react 组件内单击的切换类。
Has anyone got any ideas/advice on how i'd achieve what i'm looking for.
有没有人对我如何实现我正在寻找的东西有任何想法/建议。
Thanks!
谢谢！
回答by jered
"I have no control over toggling classes based on a click within a react component."
“我无法根据 React 组件中的点击来控制切换类。”
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:
以“反应式”的方式思考并且对修改 DOM 持谨慎态度是很好的。你想避免做 DOM 操作的主要原因是因为它会导致 React 试图呈现的内容与你可能试图进行的未知更改之间发生冲突。但是在这种情况下，您不是在操纵 React 渲染的 DOM，而是在操纵其父级。在这种情况下，您可以完全执行以下操作：
document.body.style.overflow = "hidden"
Or
或者
document.body.classList.add("no-sroll")
Or whatever works. You're totally safe because React only renders the DOM within #appand 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.
或者什么都行。你是完全安全的，因为 React 只渲染其中的 DOM #app，而不关心它的父级发生了什么。事实上，许多应用程序和网站仅在页面的一小部分使用 React 来渲染单个组件或小部件，而不是整个应用程序。
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:
除此之外，还有一种更好、更“反应式”的方式来做你想做的事。只需以滚动容器位于 React 应用程序中而不是body. 结构可能如下所示：
<html>
<body>
<div id="app">
<div id="scroll-container">
<!-- the rest of your app -->
</div>
</div>
</body>
</html>
Make bodyoverflow hidden, and bodyand #appfill the entire screen, and you can control whether #scroll-containerallows scrolling or not entirely within React.
使body溢出隐藏，body并#app填满整个屏幕，并且可以控制是否#scroll-container允许完全内无反应滚动与否。
回答by Will Po
The above doesn't work for iOS mobile.
以上不适用于 iOS 手机。
body-scroll-lockuses a combination of CSS and JS to make it work for all devices, whilst maintaining scrollability of a target element (eg. modal).
body-scroll-lock结合使用 CSS 和 JS 使其适用于所有设备，同时保持目标元素（例如模态）的可滚动性。
ie. for iOS, need to detect when the bottom or top of a target element is reached, and then stop scrolling completely
IE。对于 iOS，需要检测何时到达目标元素的底部或顶部，然后完全停止滚动
