在 ul{position:fixed} 内禁用鼠标滚轮

Question

我正在使用 wordpress 网站。我在子菜单内创建了菜单栏，使用了position:fixed 元素。有人告诉我如何在该子菜单中禁用鼠标滚轮。这意味着我不想在该子菜单内滚动页面。

请任何人帮助我。

Answer 1

您可以使用 CSS 属性 overflow: hidden; 指定如果内容溢出元素的框会发生什么。

使用overflow: hidden; 允许您不显示滚动条，因此根本不允许滚动，包括鼠标。

下面是一个非常通用的示例，请考虑在您的问题中添加您的真实标记，以修复您的真实应用代码。

https://jsfiddle.net/bxohL8tt/2/

#sub-menu{
  width:250px;
  height: 100px;
  background-color:red;
  overflow: hidden;
}

Answer 2

如果在鼠标滚轮事件上滚动的元素是主体，甚至是其他一些元素，您可以使用 JavaScript 来防止它在您的菜单具有“焦点”时滚动，如下所示：

var menuBar = document.getElementById('menuBar');

menuBar.onmouseover = function()
{
    document.body.style.overflow = 'hidden';
};

menuBar.onmouseout = function()
{
    document.body.style.overflow = 'auto';
};

在您的主要 HTML 源代码末尾的 <script> 元素中添加上述内容，它应该可以工作。

Answer 3

您可以通过以下代码做到这一点：

$("sub-menu-selector").bind("wheel mousewheel", function() {
    return false;
});

例如：（示例显示菜单上的禁用，但它是一样的）

$(".menu").bind("wheel mousewheel", function() {
  return false;
});

body {
  margin:0;  
}

.menu {
  background:black;
  color:#fff;
  position:fixed;
  width:100%;
  padding:15px;
}

.content {
  height:1500px;
  background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  Menu
</div>
<div class="content"></div>