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

【问题标题】：Enable/disable body scroll on mobile with addEventlistener使用 addEventlistener 在移动设备上启用/禁用正文滚动
【发布时间】：2017-01-25 11:10:04
【问题描述】：

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

所以，就这样吧。

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

这是我的 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”。这不起作用:(

非常感谢任何帮助！

【问题讨论】：

标签： javascript jquery html css jquery-mobile

【解决方案1】：

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

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

【讨论】：

感谢您的回复。问题是 - 如果用户可以滚动，他们也可以在后台看到内容，我不能让他们看到它，除非他们按下模式中的按钮。我还希望背景中页面的顶部可见。模态框将位于视口底部
所以可以尝试把页面body加上“overflow:hidden”，避免body内容滚动。
嗨！再次感谢。但是，如果您查看代码，那正是我正在做的事情。我也在为 iOS 做这件事。我遇到的问题是关于如何在单击模式中的按钮后重新启用移动设备上的滚动。