Disable mouse wheel inside of ul{position:fixed}

3 comments

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;
   }
   

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.

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>

Comments are closed.