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>

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

1 个答案: