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

User · Accepted Answer

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

User · Answer

Following Glens idea  here it goes another possibility  It would allow you to scroll inside the div  but would prevent the body to scroll with it  when the div scroll ends  However  it seems to accumulate too many preventDefault if you scroll too much  and then it creates a lag if you want to scroll up  Does anybody have a suggestion to fix that           scrollInsideThisDiv   bind  mouseover  function           var bodyTop   document body scrollTop            body   on               mousewheel   function e               if  document body scrollTop    bodyTop  return             e preventDefault               e stopPropagation                                            scrollInsideThisDiv   bind  mouseleave  function                 body   unbind  mousewheel

User · Answer

Without external variables              element   bind  mousewheel   function e  d                if  this scrollTop      this scrollHeight - this offsetHeight   amp  amp  d  lt  0                      this scrollTop     0  amp  amp  d  gt  0                     e preventDefault

User · Answer

You can use jquery-disablescroll to solve the problem    Disable scrolling   window disablescroll    Enable scrolling again   window disablescroll  undo      Supports handleWheel  handleScrollbar  handleKeys and scrollEventKeys

User · Answer

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  gt  0       var prevent   function             ev stopPropagation            ev preventDefault            ev returnValue   false          return false             if   up  amp  amp  -delta  gt  scrollHeight - height - scrollTop               Scrolling down  but this will take us past the bottom           this scrollTop scrollHeight            return prevent          else if  up  amp  amp  delta  gt  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

User · Answer

CSS  fixed  solution  like Facebook does    body temp       lt div class  body temp    gt         append    body   contents         css  position    fixed        css  top    -    scrolltop    px        width   window  width         appendTo  body      to toggle to normal state   var scrolltop   Math abs     body temp   position   top      body   append     body temp   contents    scrollTop scrolltop

User · Answer

tfe answered this question in another post on StackOverflow  Answered  Another method would be to use     document  bind  touchmove  function event     event preventDefault          But it may prevent some of the jquery mobile functionality from working properly

User · Answer

Plenty of good ideas on this thread   I have a lot of popups in my page for handling user input   What I use  is a combination of disabling the mousewheel and hiding the scrollbar   this disableScrollFn  function e         e preventDefault    e stopPropagation       document body style overflow    hidden      body   on  mousewheel   this disableScrollFn     Advantage of this is we stop the user from scrolling in any possible way  and without having to change css position and top properties   I m not concerened about touch events  since touch outside would close the popup   To disable this  upon closing the popup I do the following   document body style overflow    auto      body   off  mousewheel   this disableScrollFn     Note  I store a reference to my disableScrollFn on the existing object  in my case a PopupViewModel   for that gets triggered upon closing the popup to have access to disableScrollFn

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

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to scroll