禁止在React呈现的组件上使用CSS滚动
禁止在React呈现的组件上使用CSS滚动
提问于 2016-10-11 00:30:47
因此，我在html中通过React呈现了一个组件，如下所示：
<html>
<body>
<div id=app>${appHtml}</div>
<script src="/bundle.js"></script>
</body>
</html>在我的应用中，我有一个汉堡按钮，那就是onClick全屏显示。
但是，正文是可滚动的。我通常会向body标记添加一个类，并将其设置为overflow: hidden以防止发生这种情况。但是，我的react组件是在body标记内呈现的，因此我无法控制基于react组件中的单击来切换类。
有没有人对我如何实现我想要的东西有什么想法/建议。
谢谢!
回答 4
Stack Overflow用户
发布于 2018-02-18 19:27:30
以上内容在iOS手机上不起作用。
body-scroll-lock使用CSS和JS的组合来使其适用于所有设备，同时保持目标元素的可滚动性(例如，模式)。
即。对于iOS，需要检测何时到达目标元素的底部或顶部，然后完全停止滚动
Stack Overflow用户
发布于 2021-03-29 20:51:26
下面是如何在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)
这允许当我的下拉列表中的内容填满到需要添加滚动的位置时，窗口(正文)滚动被禁用，而下拉列表正在显示(覆盖整个屏幕)。因此，即使窗口(正文)滚动被禁用，我仍然可以滚动我的下拉列表。
Stack Overflow用户
发布于 2021-05-29 17:06:05
这是我的两点意见:您可以将包含内容的div的高度设置为100% ( height: 100%)，或者在本例中设置body { height: 100%}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39962757
复制相关文章
相似问题