禁用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来阻止它在您的菜单具有“焦点”时滚动：

th, td{
  padding:12px;
}
tr:hover{
  backround-color:#f5f5f5;
}

将上述内容添加到主HTML源代码末尾的var menuBar = document.getElementById('menuBar'); menuBar.onmouseover = function() { document.body.style.overflow = 'hidden'; }; menuBar.onmouseout = function() { document.body.style.overflow = 'auto'; }; 元素中，它应该可以正常工作。