移动端禁止触摸滚动

问题

当移动端页面显示弹窗时，滑动屏幕，弹窗下方的页面竟然可以上下滑动（虽然点击不到弹窗下方的内容，但仍然看不习惯~~）

解决

查阅资料后，给整个弹窗设置禁止触摸滚动，代码如下：
（由于页面中存在多个弹窗，所以获取了所有弹窗，再给每个弹窗设置禁止滚动）

var masks = document.getElementsByClassName("mask");
for (var i = 0; i < masks.length; i++) {
  masks[i].addEventListener("touchmove", function (e) {
    e.preventDefault();
  }, { passive: false })
}

注意

当选取一个元素时，如果是document.getElementsByClassName，则获取到的是类数组对象，需要选取后再添加监听事件。

var mask = document.getElementsByClassName("mask")[0];  //注意[0]
mask.addEventListener("touchmove", function (e) {
  e.preventDefault();
}, { passive: false })