Try*_*nJS 11 html javascript 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组件中的单击控制切换类.
有没有人对我如何实现我正在寻找的东西有任何想法/建议.
谢谢!
jer*_*red 24
"我根据反应组件中的点击无法控制切换类."
不一定是真的!
你以"React-ful"方式思考并且对修改DOM持谨慎态度是件好事.您希望避免执行DOM操作的主要原因是,它会导致React尝试呈现的内容与您可能尝试进行的未知更改之间发生冲突.但是在这种情况下,你不是在操纵React正在渲染的DOM,而是在操纵它的父级.在这种情况下,你会完全没有这样做:
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允许滚动或不完全之内作出反应.
以上不适用于 iOS 手机。
body-scroll-lock结合使用 CSS 和 JS 使其适用于所有设备，同时保持目标元素（例如模态）的可滚动性。
IE。对于 iOS，需要检测何时到达目标元素的底部或顶部，然后完全停止滚动
| 归档时间： |
|
| 查看次数： |
18795 次 |
| 最近记录： |