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.

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.

• javascript
• jquery
• scroll
• jquery-events

• 1 Add overflow: hidden to body & html tags. Then remove it when you wish to enable scrolling again on the document. – John Strickler Commented Oct 27, 2011 at 12:37
• 1 Good question from a technical point of view, though as a user I'm not sure I'd be thrilled with non-standard scroll behaviour. – nnnnnn Commented Oct 27, 2011 at 12:39
• 1 I'd absolutely hate to use a page that did that. It's not obvious and I'd spend a while trying to work out why my mouse wasn't working before finding out it was only on that page, at which point I'd do my utmost to never visit it again. There has to be a better way than disabling mouse scroll. – Vala Commented Oct 27, 2011 at 12:45
• 1 '$('#txt').hover(function (){ $('body').css('overflow','hidden'); }, function (){ $('body').css('overflow','auto'); })' – Sameera Thilakasiri Commented Oct 27, 2011 at 13:01
• answered here: stackoverflow.com/a/79263138/14893803 TLDR: use {passive: false} argument – DraKoan Commented Dec 8, 2024 at 19:43

4 Answers 4

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

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

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

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>