Question

我知道这看起来像是重复的但是我在网站上查看过以前的答案，但在尝试实施不同的解决方案时却没有成功。

所以，就在这里。

我创建了一个页面，由于敏感信息，我不得不提供模式/免责声明。我设法禁用桌面和移动设备上的背景体滚动。在桌面上，我还设法在单击模式中的按钮后重新启用滚动。但是，在移动设备上，用户单击模式中的按钮后，滚动保持禁用状态。

这是我的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>

正如您所看到的，我尝试添加＆＃39; true＆＃39;单击按钮时，在同一事件侦听器的末尾。这不起作用：（

非常感谢任何帮助！

Answer 1

也许最好的方法是不要尝试禁用滚动。您可以将模态容器样式位置设置为“固定”，它不会受滚动影响。在下面找到填充屏幕的容器示例。我希望它有所帮助。

<body>
    <div id="modal-container" style="position:fixed; top:0px; left:0px; width:100%; height:100%"></div>
</body>

使用addEventlistener在移动设备上启用/禁用正文滚动

1 个答案: