当前位置：文江博客话题详情

禁用鼠标滚动

发布于 2024-12-12 11:45:10 字数 203 浏览 0 评论 0原文

我有一个页面，其中有一个文本框。当我将文本框滚动到底部时，文档将在其后面滚动。当鼠标悬停在文本框上时，如何禁用文档的鼠标滚动但启用文本框的滚动？我只需要禁用鼠标滚动而不是窗口滚动条。

页面大小固定，只有在浏览器窗口未最大化时才会有滚动条。该文档的大小为 800x600 像素，我认为应该适合大多数用户。

我将 JavaScript 与 jQuery 结合使用。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

给妤﹃绝世温柔 2024-12-19 11:45:12

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

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

回复收藏 0 原文

望笑 2024-12-19 11:45:12

使用以下代码禁用滚动：

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

有关兼容性，请参阅：http://www.quirksmode。 org/dom/events/scroll.html

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

回复收藏 0 原文

雾里花 2024-12-19 11:45:12

此解决方案与 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>

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>

回复收藏 0 原文

扮仙女 2024-12-19 11:45:11

您可以尝试以下操作，

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

如果您选择使用以下命令，也可以在 CSS 中执行此操作；

body{
overflow: hidden;
}

我突然想到了这一点。如果您不希望它们滚动，您还可以向 CSS 类添加一些内容，如下所示

希望这会有所帮助！

快乐编码！ ;)

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;