如何解决无法读取未定义的属性“setAllowScrolling”与 fullPage.js
我试图在模式弹出窗口打开时禁用滚动。下面的 if 语句确实在模态打开时禁用滚动,但在模态关闭后,仍然禁用滚动
if (isMoreInfoOpen === true) {
fullpageApi.setAllowScrolling(false);
}
为了解决这个问题,我添加了一个 else 语句来在模式关闭后重新打开滚动。
if (isMoreInfoOpen === true) {
fullpageApi.setAllowScrolling(false);
} else {
fullpageApi.setAllowScrolling(true);
}
但是,添加 else 语句会导致错误: 无法读取未定义的属性“setAllowScrolling”
我在这里重现了这个问题:https://7pq3i.csb.app/
解决方法
我在尝试在打开整页菜单时禁用 react-fullpage 滚动时遇到了类似的问题。这似乎已经为我解决了:
if (isNavOpen) {
fullpageApi.setAllowScrolling(false)
console.log('fp scrolling locked')
}
else if (state.initialized === true && isNavOpen === false) {
fullpageApi.setAllowScrolling(true)
console.log('fp scrolling unlocked')
}
检查 react-fullpage 状态是否已初始化且导航已打开似乎解决了未定义的错误。
我使用 react-context 来存储我的“isNavOpen”状态,“state.initialized”指的是 react-fullpage 状态渲染道具。
,试试下面的方法
window.fullpage_api.setAllowScrolling(<true/false>)
所以对我来说,在 componentDidMount
中,我首先检查模态是否打开,如果是,则设置
window.fullpage_api.setAllowScrolling(false)
在我的模态组件中,我有一个 closeModal 函数,在那里,我用
打开它window.fullpage_api.setAllowScrolling(true)
这对我有用,所以希望这能帮到你!我不确定这是否是最佳的,但它正在工作,如果我发现其他任何东西,我会继续玩和发布。
,您需要检查 fullpageApi 是否已初始化。这样的事情...
if (fullpageApi) {
...
}
,
我最终通过使用 normalScrollElements 避免了 setAllowScroll 方法。
刚刚添加了模态类名:
normalScrollElements = {'.modal-container'}
在移动设备上运行良好,但在桌面设备上有问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。