Disabling mouse scrolling

Question

I have a page with a textbox in it. When I scroll the textbox to the bottom, the document will scroll after it. How to disable mouse scrolling for the document but enable sc

Answer 1

Use the following code to disable scrolling:

if(window.addEventListener){ //Firefox only
    window.addEventListener("DOMMouseScroll", function(e){e.preventDefault()}, true);
}
window.onscroll = function(e){e.preventDefault()};

For compability, see: http://www.quirksmode.org/dom/events/scroll.html

Answer 2

This solution is same of Sameera but without Jquery:

var azul = document.getElementById("azul");

azul.onmouseover = function(){
   document.body.style.overflowY = "hidden";
};

azul.onmouseout = function(){
   document.body.style.overflowY = "auto";
};

#total{
  height: 900px;
}

#amarela{
  background-color: yellow;
  height:50%;
}

#azul{
  background-color: blue;
  height:50%;
}

<div id="total">
  <div id="amarela"></div>
  <div id="azul"></div>
</div>

Answer 3

You could try the following

 <script type="text/javascript">
             function stop()
             {
                 return false;
             }
             document.onmousewheel=stop;
    </script>

You could also do this in CSS if you choose to do so using the following;

body{
overflow: hidden;
}

Off the top of my head I came up with that. If you don't want them to scroll you could also add some stuff to your CSS class like the following

Hope this helps!

Happy Coding! ;)

Answer 4

$('#txt').hover(function (){
    $('body').css('overflow','hidden');
}, function (){
    $('body').css('overflow','auto');
})