锁定主体滚动，阻止目标元素滚动。
我使用下面的库来锁定页面正文的滚动，并且只允许在我的模式上滚动，如果它是打开的。
https://www.npmjs.com/package/body-scroll-lock
我的模式AddItemModal是一个门户，所以在index.html文件中我有这个。
<body>
<div id="root"></div>
<div id="add-item-modal"></div>
</body>NavigationIcons组件(其中打开了模态)
const NavigationIcons = (props) => {
let targetElement = document.getElementById("add-item-modal");
useEffect(() => {
...
return () => clearAllBodyScrollLocks();
}, []);
const renderAddItemModal = () => {
if (props.addItem) {
disableBodyScroll(targetElement);
return <AddItemModal />;
}
};
return (
<div className="main-4" onClick={() => props.openAddItemModal()}>
{renderAddItemModal()}
</div>
);
}AddItemModalHeader组件(其中模态关闭)
const AddItemModalHeader = (props) => {
let targetElement = document.getElementById("add-item-modal");
return (
<div className="modal-header">
add item
<div className="close" onClick={(e) => {
props.handleModalClose(e);
enableBodyScroll(targetElement);
}}>
close
</div>
</div>
)
}在文档中，targetElement必须是我想要显示的模式。但是，由于应用程序是在root div中呈现的，并且在add-item-modal中显示模式，所以它不应该是root，而应该应用所提供的函数，如enableBodyScroll、disableBodyScroll、clearAllBodyScrollLocks。我确实尝试过使用root和add-item-modal，在这两种情况下，当我从iOS设备进行测试时，滚动都不能在模式上工作。
这里提供的例子并没有向我说明这一点。有人能解释一下我做错了什么吗？
更新
在iOS设备上可能有此问题的其他人请参阅Github线程https://github.com/ionic-team/ionic-v1/issues/155#issuecomment-411110252中解释得很好的以下答案
回答 2
Stack Overflow用户
发布于 2021-04-11 15:10:58
有些人知道body-scroll-lock的问题是
- 在Android webview上不工作
- 不工作在电脑上的鼠标轮
- 在iOS上不起作用，如果你触摸某个地方而不是targetElement
- 必须通过targetElement，即使没有必要
请知道我和
tua-body-scroll-lock没有任何联系。
tua-body-scroll-lock具有与body-scroll-lock提供的相同的功能。喜欢
disableBodyScroll别名用于lockenableBodyScroll别名用于unlockclearAllBodyScrollLocks别名用于clearBodyLocks
我用示例用tua-body-scroll-lock做了个小提琴
然后，您的代码应该类似于
import {lock, unlock, clearBodyLocks} from 'tua-body-scroll-lock';
const NavigationIcons = (props) => {
...
useEffect(() => {
...
return () => clearBodyLocks();
}, []);
const renderAddItemModal = () => {
if (props.addItem) {
lock(targetElement);
return <AddItemModal />;
}
};
...
}
const AddItemModalHeader = (props) => {
return (
<div className="modal-header">
add item
<div className="close" onClick={(e) => {
props.handleModalClose(e);
unlock(targetElement);
}}>
close
</div>
</div>
)
}Stack Overflow用户
发布于 2021-04-11 15:40:24
如果您查看它们的源代码，disableBodyScroll在内部所做的唯一事情就是附加ontouchstart和ontouchmove事件(如果设备是IOS )，如果targetElement接近可滚动边界，只需要有条件地防止事件发生(通过调用e.preventDefault())。
因此，如果我正确地理解了它，targetElement必须是一个可滚动的元素，否则它将永远不会绕过那些边界检查并阻止滚动。
在您的例子中，我认为add-item-modal不是一个可滚动的元素，因此它不能工作。尝试在模态中使用任何可滚动元素作为targetElement。
https://stackoverflow.com/questions/67013649
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号