我知道这可能看起来像是重复的,但我查看了网站上以前的答案,但在尝试实现不同的解决方案时没有成功。
那么,就这样吧。
我创建了一个页面,由于敏感信息,我必须在其中提供模态/免责声明。 我已经设法在桌面和移动设备上禁用背景主体滚动。在桌面上,我还设法在单击模式中的按钮后重新启用滚动。但是,在移动设备上,在用户单击模式中的按钮后,滚动保持禁用状态。
这是我的 JS:
<script>
window.onload = function () {
$('body').css('overflow','hidden')
document.body.addEventListener("touchmove", function(event) {
event.preventDefault();
}, false);
document.getElementById('button').onclick = function () {
$('body').css('overflow','scroll')
document.body.addEventListener("touchmove", function(event) {
event.preventDefault();
}, true);
document.getElementById('modal').style.display = "none"
};
};
</script>
如您所见,我尝试在单击按钮时在同一事件监听器的末尾添加“true”。这不起作用:(
非常感谢任何帮助!
最佳答案
也许最好的方法就是不要尝试禁用滚动。您可以将模态容器样式位置设置为“固定”,它不会受到滚动的影响。在下面找到一个充满屏幕的容器示例。希望对您有所帮助。
<body>
<div id="modal-container" style="position:fixed; top:0px; left:0px; width:100%; height:100%"></div>
</body>
关于javascript - 使用 addEventlistener 在移动设备上启用/禁用主体滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41850046/