javascript - 使用 addEventlistener 在移动设备上启用/禁用主体滚动

标签 javascript jquery html css jquery-mobile

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

那么,就这样吧。

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

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

相关文章:

javascript - 在 Django python url 模板标签中获取 javascript 变量的值

javascript - 未捕获的 IndexSizeError : Failed to execute 'insertCell' on 'HTMLTableRowElement' : The value provided (1) is outside the range [-1, 0]

javascript - 将响应结果存储在变量中

javascript - 如何在 .addEventListener 中访问 Vue.prototype?

javascript - 除了服务器端回调之外,我如何调用 javascript 函数?

javascript - TypeError : $(. ..).dialog 不是 devserver 上的函数

jquery - NanoScroller 不触发自身

javascript - 在 Firefox 中,为什么当 javascript 更改背景颜色时 HTML 按钮大小会减小?

javascript - 我可以更改传单图 block 的大小吗?

javascript - js网格 : Adding a row using json data