Disabling Mouse Scrolling

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 scrolling

Solution 1:

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

Solution 2:

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! ;)

Solution 3:

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

Solution 4:

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>