jQuery or Javascript - how to disable window scroll without overflow:hidden;

Question

Hi is it possible to disable window scrolling without using overflow:hidden; when i'm hover an element?

i tryed :

$('.chat-content').on('mouseenter',function(){     $(document).scroll(function(e){         if(!$(e).hasClass('.chat-content'))         e.stopPropagation();         e.preventDefault();     }); }); 

i mean, i want to leave visible the scrollbar but when i scroll out of the element i'm over with mouse the window doesn't scrolls, while the element i'm over can scroll

So disable scroll for body but not for element i'm over without using css

here is another try i did: http://jsfiddle.net/SHwGL/

Answer 1

Try to handler 'mousewheel' event on all nodes except one

$('body').on({     'mousewheel': function(e) {         if (e.target.id == 'el') return;         e.preventDefault();         e.stopPropagation();     } }) 

Demo: http://jsfiddle.net/DHz77/1/

Answer 2

If you want to scroll the element you're over and prevent the window to scroll, here's a really useful function :

$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {     var $this = $(this),         scrollTop = this.scrollTop,         scrollHeight = this.scrollHeight,         height = $this.height(),         delta = (ev.type == 'DOMMouseScroll' ?             ev.originalEvent.detail * -40 :             ev.originalEvent.wheelDelta),         up = delta > 0;      var prevent = function() {         ev.stopPropagation();         ev.preventDefault();         ev.returnValue = false;         return false;     }      if (!up && -delta > scrollHeight - height - scrollTop) {         // Scrolling down, but this will take us past the bottom.         $this.scrollTop(scrollHeight);          return prevent();     } else if (up && delta > scrollTop) {         // Scrolling up, but this will take us past the top.         $this.scrollTop(0);         return prevent();     } }); 

Apply the class "Scrollable" to your element and that's it!