Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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/

like image 682
itsme Avatar asked Nov 06 '13 16:11

itsme


People also ask

How do I turn off scroll without hiding?

Apply 'noscroll' to html instead of to body to prevent double scroll bars in IE. To check if there's actually a scroll bar before adding the 'noscroll' class. Otherwise, the site will also jump pushed by the new non-scrolling scroll bar.

Does overflow hidden prevent scrolling?

To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.

Why does overflow hidden not work?

It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.


2 Answers

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/

like image 67
Glen Swift Avatar answered Oct 06 '22 00:10

Glen Swift


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!

like image 26
pmrotule Avatar answered Oct 06 '22 00:10

pmrotule