Turn off mouse scrolling

Question

I have a page with a text box. When I scroll to the end of the text box, the document will scroll after it. How to disable mouse scrolling for a document, but allow scrolling for a text field when the mouse is over a text field? I only need to disable mouse scrolling, not window scrolling.

The page has a fixed size, and only if the browser bars are not increased, there will be scroll bars. The document has a size of 800x600 pixels and should fit most of the users that I consider.

I am using JavaScript with jQuery.

Answer 1

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

Answer 2

You can try the following

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

You can also do this in CSS if you decide to do this using the following:

 body{ overflow: hidden; } 

From head to toe I came up with this. If you don't want them to scroll, you could also add some things to your CSS class, for example the following

Hope this helps!

Happy coding!;)

Answer 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 compatibility see: http://www.quirksmode.org/dom/events/scroll.html

Answer 4

This solution is similar to 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>