Question

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

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

我在jQuery中使用JavaScript。

Answer 1

您可以尝试以下

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

如果您选择使用以下内容，也可以在CSS中执行此操作;

body{
overflow: hidden;
}

离开我的头顶，我想出了那个。如果您不希望它们滚动，您还可以在CSS类中添加一些内容，如下所示

希望这有帮助！

快乐的编码！ ;）

Answer 2

使用以下代码禁用滚动：

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

Answer 3

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

Answer 4

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

禁用鼠标滚动

4 个答案: