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

原创

wx5864b4ab50c8a 2021-11-18 10:05:17 博主文章分类：js ©著作权

文章标签 加载 html 数据上下滚动 desktop 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者wx5864b4ab50c8a的原创作品，请联系作者获取转载授权，否则将追究法律责任

需求说明

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

实际问题效果展示

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

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

禁止滚动后的效果

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

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

线上演示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>