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