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 for the textbox when mouse is over textbox? I only need to disable mouse scroll and not window scrollbars.

The page has a fixed size and there will only be scrollbars when the browser window is not maximized. The document has a 800x600 px size and should fit for most users I think.

I'm using JavaScript with jQuery.

回答1:

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

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

回答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

回答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>