javascript 禁用鼠标滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7915882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabling mouse scrolling
提问by VeroLom
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.
页面有固定大小，只有在浏览器窗口未最大化时才会有滚动条。该文档的大小为 800x600 像素，我认为应该适合大多数用户。
I'm using JavaScript with jQuery.
我在 jQuery 中使用 JavaScript。
采纳答案by Sameera Thilakasiri
$('#txt').hover(function (){
$('body').css('overflow','hidden');
}, function (){
$('body').css('overflow','auto');
})
回答by Carl Finch
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;
如果您选择使用以下内容，您也可以在 CSS 中执行此操作；
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
我突然想到了这个。如果您不希望它们滚动，您还可以向 CSS 类添加一些内容，如下所示
Hope this helps!
希望这可以帮助！
Happy Coding! ;)
快乐编码！;)
回答by Rob W
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
有关兼容性，请参阅：http://www.quirksmode.org/dom/events/scroll.html
回答by Caique Romero
This solution is same of Sameera but without Jquery:
此解决方案与 Sameera 相同，但没有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>