我无法阻止 Chrome 中的鼠标滚轮事件

Question

我想阻止用户通过鼠标滚轮滚动。在 Firefox 中它可以工作，但在 Chrome 中不行。Chrome 必须更改哪些内容？

$(window).on('wheel', function(e) {    
  e.preventDefault(); // Prevent user scroll during page jump
})

jsFiddle

Answer 1

您需要将事件处理程序设置为非被动才能在 Chrome 上运行。据我所知，这在 jQuery 中是不可能的。但您可以使用常规方法addEventListener来实现此目的。

document.addEventListener('wheel', function(e) {
  e.preventDefault(); // Prevent user scroll during page jump
}, {
  passive: false
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  height: 2000px;
}

<div id="banner-message">
  <p>Mousewheel should be prevented</p>
</div>

正如Shikkediel在评论中指出的：如果您想支持旧（版本）浏览器（例如 Internet Explorer），建议首先检查passive浏览器是否支持该选项。较旧的浏览器将布尔类型作为addEventListener. 因此，他们可能会抛出错误，或者他们可以将第三个参数设置为 true（默认为 false），这可能会导致一些不良行为。您可以使用下面的代码来实现这一点。

var passiveSupported = supportsPassive();

document.addEventListener('wheel', function(e) {
  e.preventDefault(); // Prevent user scroll during page jump
}, passiveSupported ? {
  passive: false
} : false);

function supportsPassive() {
  var passiveSupported = false;

  try {
    var options = {
      get passive() {
        passiveSupported = true;
      }
    };

    window.addEventListener("test", options, options);
    window.removeEventListener("test", options, options);
  } catch (err) {
    passiveSupported = false;
  }

  return passiveSupported;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
  height: 2000px;
}

<div id="banner-message">
  <p>Mousewheel should be prevented</p>
</div>