js如何禁止滚动条滚动，但不消失！

需求说明

列表页每次更换筛选条件时，当接口还未获得新数据前，会有加载遮罩在最上层显示，提示用户等待一段时间，一旦新数据拿到后隐藏加载遮罩。此时我们碰到一个问题，我们的列表页都超过一屏，会有自己的滚动条，即使加载遮罩盖在其上方，其仍然可以上下滚动，体验不是很好。

实际问题效果展示

为了保证图片质量，没有特地展示滚动条的变化，大家知道浏览器最右侧是存在滚动条即可

禁止滚动后的效果

为了保证图片质量，没有特地展示滚动条的变化，大家知道浏览器最右侧是存在滚动条即可

线上演示demo地址

地址链接：禁止滚动条的demo

实现功能讲解

<script>
  document.getElementById("enable").onclick = function () {
    enableScroll();
    document.getElementById("status").innerHTML = "enabled";
    document.getElementById("status").className = "enabled";
  };

  document.getElementById("disable").onclick = function () {
    disableScroll();
    document.getElementById("status").innerHTML = "disabled";
    document.getElementById("status").className = "disabled";
  };

  // left: 37, up: 38, right: 39, down: 40
  const keys = { 37: 1, 38: 1, 39: 1, 40: 1 };

  function preventDefault(e) {
    e.preventDefault();
  }

  function preventDefaultForScrollKeys(e) {
    if (keys[e.keyCode]) {
      preventDefault(e);
      return false;
    }
  }

  let supportsPassive = false;
  try {
    window.addEventListener("test", null, Object.defineProperty({}, "passive", {
        get: function () {
          supportsPassive = true;
        },
      })
    );
  } catch (e) {}

  const wheelOpt = supportsPassive ? { passive: false } : false;
  const wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";

  // call this to Disable
  function disableScroll() {
    window.addEventListener("DOMMouseScroll", preventDefault, false); // older FF
    window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
    window.addEventListener("touchmove", preventDefault, wheelOpt); // mobile
    window.addEventListener("keydown", preventDefaultForScrollKeys, false);
  }

  // call this to Enable
  function enableScroll() {
    window.removeEventListener("DOMMouseScroll", preventDefault, false);
    window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
    window.removeEventListener("touchmove", preventDefault, wheelOpt);
    window.removeEventListener("keydown", preventDefaultForScrollKeys, false);
  }
</script>

• preventDefaultForScrollKeys事件主要阻止键盘↑↓←→键的默认行为；
• e.preventDefault()该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。相关文档
• { passive: false }的作用：passive的作用
• window.addEventListener("test", null...这段代码来源于：addEventListener
• ..."onwheel" in document.createElement("div")...滚轮事件的不同浏览器兼容

最后

如果深入研究的话这里还是有几个概念不怎么容易掌握的，比方说passive属性新增的目的，碰到这样的问题正好又找到解决办法就记录一下，不相信自己的好记性了，也希望对看到本文的人有所帮助！