Disable mouse wheel inside of ul{position:fixed}

Question

I am using wordpress site. I created menu bar, inside of sub-menu, used position:fixed element. Anybody tell me how can i disable mousewheel inside of that sub-menu. That means i don't want page scroll inside of that sub-menu.

Please anyone help me.

Answer 1

You can use CSS property overflow: hidden; which specifies what happens if content overflows an element's box.

Using overflow: hidden; allow you to do not show up the scroll bar and so do not allowing scrolling at all including mouse weal.

Here below a very generic example, please consider to add your real markup in your question for a fix on your real app code.

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

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

Answer 2

If the element that is scrolling on mouse-wheel event is the body, or even some other element, you can use JavaScript to prevent it from scrolling while your menu has "focus" like this:

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

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

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

Add the above inside a <script> element at the end of your main HTML source-code and it should work.

Answer 3

You can do this by the following code:

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

For example: (The example shows the disabling on the menu but it's just the same)

$(".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>