Prevent scrolling of parent element when inner element scroll position reaches top bottom

Question

I have a little  floating tool box  - a div with position fixed  overflow auto  Works just fine   But when scrolling inside that box  with the mouse wheel  and reaching the bottom OR top  the parent element  takes over  the  scroll request    The document behind the tool box scrolls  - Which is annoying and not what the user  asked for    I m using jQuery and thought I could stop this behaviour with event stoppropagation        toolBox   scroll  function event   event stoppropagation          It does enter the function  but still  propagation happens anyway  the document scrolls  - It s surprisingly hard to search for this topic on SO  and Google   so I have to ask  How to prevent propagation   bubbling of the scroll-event      Edit  Working solution thanks to amustill  and Brandon Aaron for the mousewheel-plugin here  https   github com brandonaaron jquery-mousewheel raw master jquery mousewheel js        ToolPage   bind  mousewheel   function e  d        var t     this       if  d  gt  0  amp  amp  t scrollTop       0            e preventDefault              else           if  d  lt  0  amp  amp   t scrollTop      t get 0  scrollHeight - t innerHeight                   e preventDefault

User · Answer

As variant  to avoid performance issues with scroll or mousewheel handling  you can use code like below   css   body noscroll       overflow  hidden     scrollable       max-height  200px      overflow-y  scroll      border  1px solid  ccc      html    lt div class  scrollable  gt     A bunch of items to make the div scroll     lt  div gt     A bunch of text to make the body scroll      js   var  document     document        body      body         scrolable       scrollable      scrolable on              mouseenter   function                     add hack class to prevent workspace scroll when scroll outside              body addClass  noscroll                            mouseleave   function                     remove hack class to allow scroll              body removeClass  noscroll                              Example of work  http   jsbin com damuwinarata 4

User · Answer

All the solutions given in this thread don t mention an existing - and native - way to solve this problem without reordering DOM and or using event preventing tricks  But there s a good reason  this way is proprietary - and available on MS web platform only  Quoting MSDN   -ms-scroll-chaining property - specifies the scrolling behavior that occurs when a user hits the scroll limit during a manipulation  Property values  chained - Initial value  The nearest scrollable parent element begins scrolling when the user hits a scroll limit during a manipulation  No bounce effect is shown  none - A bounce effect is shown when the user hits a scroll limit during a manipulation   Granted  this property is supported on IE10  Edge only  Still  here s a telling quote   To give you a sense of how popular preventing scroll chaining may be  according to my quick http-archive search  quot -ms-scroll-chaining  none quot  is used in 0 4  of top 300K pages despite being limited in functionality and only supported on IE Edge   And now good news  everyone  Starting from Chrome 63  we finally have a native cure for Blink-based platforms too - and that s both Chrome  obviously  and Android WebView  soon   Quoting the introducing article   The overscroll-behavior property is a new CSS feature that controls the behavior of what happens when you over-scroll a container  including the page itself   You can use it to cancel scroll chaining  disable customize the pull-to-refresh action  disable rubberbanding effects on iOS  when Safari implements overscroll-behavior   and more       The property takes three possible values  auto - Default  Scrolls that originate on the element may propagate to ancestor elements  contain - prevents scroll chaining  Scrolls do not propagate to ancestors but local effects within the node are shown  For example  the overscroll glow effect on Android or the rubberbanding effect on iOS which notifies the user when they ve hit a scroll boundary  Note  using overscroll-behavior  contain on the html element prevents overscroll navigation actions  none - same as contain but it also prevents overscroll effects within the node itself  e g  Android overscroll glow or iOS rubberbanding         The best part is that using overscroll-behavior does not adversely affect page performance like the hacks mentioned in the intro   Here s this feature in action  And here s corresponding CSS Module document  UPDATE  Firefox  since version 59  has joined the club  and MS Edge is expected to implement this feature in version 18  Here s the corresponding caniusage

User · Answer

You can try it this way       element   on  shown   function           body   css  overflow-y    hidden          body   css  margin-left    -17px             element   on  hide   function           body   css  overflow-y    scroll          body   css  margin-left    0px

User · Answer

In case someone is still looking for a solution for this  the following plugin does the job http   mohammadyounes github io jquery-scrollLock   It fully addresses the issue of locking mouse wheel scroll inside a given container  preventing it from propagating to parent element   It does not change wheel scrolling speed  user experience will not be affected  and you get the same behavior regardless of the OS mouse wheel vertical scrolling speed  On Windows it can be set to one screen or one line up to 100 lines per notch    Demo  http   mohammadyounes github io jquery-scrollLock example   Source  https   github com MohammadYounes jquery-scrollLock

User · Answer

Check out Leland Kwong s code   Basic idea is to bind the wheeling event to the child element  and then  use the native javascript property scrollHeight and the jquery property outerHeight of the child element to detect the end of the scroll  upon which return false to the wheeling event to prevent any scrolling   var scrollableDist curScrollPos wheelEvent dY      child-element   on  wheel   function e     scrollableDist     this  0  scrollHeight -   this  outerHeight      curScrollPos     this  scrollTop      wheelEvent   e originalEvent    dY   wheelEvent deltaY    if   dY gt 0  amp  amp  curScrollPos  gt   scrollableDist            dY lt 0  amp  amp  curScrollPos  lt   0         return false

User · Answer

For those using MooTools  here is equivalent code                mousewheel   function event               var height   this getSize   y              height -  2        Not sure why I need this bodge             if   this scrollTop      this scrollHeight - height   amp  amp  event wheel  lt  0                       this scrollTop     0  amp  amp  event wheel  gt  0                     event preventDefault                    Bear in mind that I  like some others  had to tweak a value by a couple of px  that is what the height -  2 is for   Basically the main difference is that in MooTools  the delta info comes from event wheel instead of an extra parameter passed to the event   Also  I had problems if I bound this code to anything  event target scrollHeight for a bound function does not equal this scrollHeight for a non-bound one   Hope this helps someone as much as this post helped me

User · Answer

There are tons of questions like this out there  with many answers  but I could not find a satisfactory solution that did not involve events  scripts  plugins  etc   I wanted to keep it straight in HTML and CSS   I finally found a solution that worked  although it involved restructuring the markup to break the event chain     1  Basic problem  Scrolling input  i e   mousewheel  applied to the modal element will spill over into an ancestor element and scroll it in the same direction  if some such element is scrollable    All examples are meant to be viewed on desktop resolutions   https   jsfiddle net ybkbg26c 5   HTML    lt div id  parent  gt     lt div id  modal  gt      This text is pretty long here   Hope fully  we will get some scroll bars     lt  div gt   lt  div gt    CSS    modal     position  absolute    height  100px    width  100px    top  20     left  20     overflow-y  scroll     parent     height  4000px        2  No parent scroll on modal scroll  The reason why the ancestor ends up scrolling is because the scroll event bubbles and some element on the chain is able to handle it   A way to stop that is to make sure none of the elements on the chain know how to handle the scroll   In terms of our example  we can refactor the tree to move the modal out of the parent element   For obscure reasons  it is not enough to keep the parent and the modal DOM siblings  the parent must be wrapped by another element that establishes a new stacking context   An absolutely positioned wrapper around the parent can do the trick     The result we get is that as long as the modal receives the scroll event  the event will not bubble to the  parent  element     It should typically be possible to redesign the DOM tree to support this behavior without affecting what the end user sees   https   jsfiddle net 0bqq31Lv 3    HTML    lt div id  context  gt     lt div id  parent  gt     lt  div gt   lt  div gt   lt div id  modal  gt    This text is pretty long here   Hope fully  we will get some scroll bars   lt  div gt    CSS  new only     context     position  absolute    overflow-y  scroll    top  0    bottom  0    left  0    right  0        3  No scroll anywhere except in modal while it is up  The solution above still allows the parent to receive scroll events  as long as they are not intercepted by the modal window  i e  if triggered by mousewheel while the cursor is not over the modal    This is sometimes undesirable and we may want to forbid all background scrolling while the modal is up   To do that  we need to insert an extra stacking context that spans the whole viewport behind the modal   We can do that by displaying an absolutely positioned overlay  which can be fully transparent if necessary  but not visibility hidden    https   jsfiddle net 0bqq31Lv 2   HTML    lt div id  context  gt     lt div id  parent  gt     lt  div gt   lt  div gt   lt div id  overlay  gt     lt  div gt   lt div id  modal  gt    This text is pretty long here   Hope fully  we will get some scroll bars   lt  div gt    CSS  new on top of  2     overlay     background-color  transparent    position  absolute    top  0    bottom  0    left  0    right  0

User · Answer

There is ES 6 crossbrowser   mobile vanila js decision   function stopParentScroll selector        let last touch      let MouseWheelHandler    e  selector    gt            let delta          if e deltaY              delta   e deltaY          else if e wheelDelta              delta   e wheelDelta          else if e changedTouches               if  last touch                   last touch   e changedTouches 0  clientY                            else                  if e changedTouches 0  clientY  gt  last touch                       delta   -1                                    else                      delta   1                                                    let prevent   function                 e stopPropagation                e preventDefault                e returnValue   false              return false                      if selector scrollTop     0  amp  amp  delta  lt  0               return prevent                      else if selector scrollTop      selector scrollHeight - selector clientHeight   amp  amp  delta  gt  0               return prevent                          selector onwheel   e   gt   MouseWheelHandler e  selector         selector onmousewheel   e   gt   MouseWheelHandler e  selector         selector ontouchmove    e   gt   MouseWheelHandler e  selector

User · Answer

Using native element scroll properties with the delta value from the mousewheel plugin    elem on  mousewheel   function  e  delta           Restricts mouse scrolling to the scrolling range of this element      if           this scrollTop  lt  1  amp  amp  delta  gt  0             this clientHeight   this scrollTop      this scrollHeight  amp  amp  delta  lt  0                 e preventDefault

User · Answer

my jQuery plugin       child   dontScrollParent       fn dontScrollParent   function         this bind  mousewheel DOMMouseScroll  function e                var delta   e originalEvent wheelDelta    -e originalEvent detail           if  delta  gt  0  amp  amp    this  scrollTop    lt   0              return false          if  delta  lt  0  amp  amp    this  scrollTop    gt   this scrollHeight -   this  height                return false           return true

User · Answer

New web dev here  This worked like a charm for me on both IE and Chrome   static preventScrollPropagation e  HTMLElement        e onmousewheel    ev    gt            var preventScroll   false          var isScrollingDown   ev wheelDelta  lt  0          if  isScrollingDown                var isAtBottom   e scrollTop   e clientHeight    e scrollHeight              if  isAtBottom                    preventScroll   true                          else               var isAtTop   e scrollTop    0              if  isAtTop                    preventScroll   true                                  if  preventScroll                ev preventDefault                        Don t let the number of lines fool you  it is quite simple - just a bit verbose for readability  self documenting code ftw right    Also I should mention that the language here is TypeScript  but as always  it is straightforward to convert it to JS

User · Answer

The best solution I could find was listening to the scroll event on the window and set the scrollTop to the previous scrollTop if the child div was visible   prevScrollPos   0   window  scroll  ev  - gt      if     mydiv   is   visible           document body scrollTop   prevScrollPos     else         prevScrollPos   document body scrollTop   There is a flicker in the background of the child div if you fire a lot of scroll events  so this could be tweaked  but it is hardly noticed and it was sufficient for my use case

User · Answer

I know it s quite an old question  but since this is one of top results in google    I had to somehow cancel scroll bubbling without jQuery and this code works for me   function preventDefault e      e   e    window event    if  e preventDefault      e preventDefault      e returnValue   false       document getElementById  a   onmousewheel   function e       document getElementById  a   scrollTop -  e  wheelDeltaY     preventDefault e

User · Answer

Here s a plain JavaScript version   function scroll e      var delta    e type      mousewheel     e wheelDelta   e detail   -40    if  delta  lt  0  amp  amp   this scrollHeight - this offsetHeight - this scrollTop   lt   0        this scrollTop   this scrollHeight      e preventDefault        else if  delta  gt  0  amp  amp  delta  gt  this scrollTop        this scrollTop   0      e preventDefault          document querySelectorAll   scroller   addEventListener  mousewheel   scroll   document querySelectorAll   scroller   addEventListener  DOMMouseScroll   scroll

User · Answer

I have a similar situation and here s how i solved it  All my scrollable elements get the class scrollable     document  on  wheel     scrollable   function evt      var offsetTop   this scrollTop   parseInt evt originalEvent deltaY  10     var offsetBottom   this scrollHeight - this getBoundingClientRect   height - offsetTop     if  offsetTop  lt  0    offsetBottom  lt  0        evt preventDefault        else       evt stopImmediatePropagation              stopImmediatePropagation   makes sure not to scroll parent scrollable area from scrollable child area   Here s a vanilla JS implementation of it  http   jsbin com lugim 2 edit js output

User · Answer

the method above is not that natural  after some googling I find a more nice solution   and no need of jQuery  see  1  and demo  2     x000D   x000D    var element   document getElementById  uf-notice-ul    x000D   x000D    var isMacWebkit    navigator userAgent indexOf  Macintosh       -1  amp  amp  x000D      navigator userAgent indexOf  WebKit       -1   x000D    var isFirefox    navigator userAgent indexOf  firefox       -1   x000D   x000D    element onwheel   wheelHandler     Future browsers x000D    element onmousewheel   wheelHandler     Most current browsers x000D    if  isFirefox    x000D      element scrollTop   0  x000D      element addEventListener  DOMMouseScroll   wheelHandler  false   x000D      x000D       prevent from scrolling parrent elements x000D    function wheelHandler event    x000D      var e   event    window event     Standard or IE event object x000D   x000D         Extract the amount of rotation from the event object  looking x000D         for properties of a wheel event object  a mousewheel event object  x000D          in both its 2D and 1D forms   and the Firefox DOMMouseScroll event  x000D         Scale the deltas so that one  click  toward the screen is 30 pixels  x000D         If future browsers fire both  wheel  and  mousewheel  for the same x000D         event  we ll end up double-counting it here  Hopefully  however  x000D         cancelling the wheel event will prevent generation of mousewheel  x000D      var deltaX   e deltaX   -30       wheel event x000D        e wheelDeltaX   4       mousewheel x000D        0     property not defined x000D      var deltaY   e deltaY   -30       wheel event x000D        e wheelDeltaY   4       mousewheel event in Webkit x000D         e wheelDeltaY     undefined  amp  amp     if there is no 2D property then  x000D          e wheelDelta   4        use the 1D wheel property x000D        e detail   -10       Firefox DOMMouseScroll event x000D        0     property not defined x000D   x000D         Most browsers generate one event with delta 120 per mousewheel click  x000D         On Macs  however  the mousewheels seem to be velocity-sensitive and x000D         the delta values are often larger multiples of 120  at  x000D         least with the Apple Mouse  Use browser-testing to defeat this  x000D      if  isMacWebkit    x000D        deltaX    30  x000D        deltaY    30  x000D        x000D      e currentTarget scrollTop -  deltaY  x000D         If we ever get a mousewheel or wheel event in  a future version of  x000D         Firefox  then we don t need DOMMouseScroll anymore  x000D      if  isFirefox  amp  amp  e type      DOMMouseScroll     x000D        element removeEventListener  DOMMouseScroll   wheelHandler  false   x000D        x000D         Don t let this event bubble  Prevent any default action  x000D         This stops the browser from using the mousewheel event to scroll x000D         the document  Hopefully calling preventDefault   on a wheel event x000D         will also prevent the generation of a mousewheel event for the x000D         same rotation  x000D      if  e preventDefault  e preventDefault    x000D      if  e stopPropagation  e stopPropagation    x000D      e cancelBubble   true     IE events x000D      e returnValue   false     IE events x000D      return false  x000D      x000D   x000D   x000D     1  https   dimakuzmich wordpress com 2013 07 16 prevent-scrolling-of-parent-element-with-javascript    2  http   jsfiddle net dima k 5mPkB 1

User · Answer

M K  offered a great plugin in his answer  Plugin can be found here  However  for the sake of completion  I thought it d be a good idea to put it together in one answer for AngularJS    Start by injecting the bower or npm  whichever is preferred   bower install jquery-scrollLock --save npm install jquery-scroll-lock --save  Add the following directive  I am choosing to add it as an attribute   function         use strict        angular         module  app           directive  isolateScrolling   isolateScrolling           function isolateScrolling                return                  restrict   A                  link  function sc  elem  attrs                          scroll-container   scrollLock                                                  And the important piece the plugin fails to document in their website is the HTML structure that it must follow    lt div class  scroll-container locked  gt       lt div class  scrollable  isolate-scrolling gt               whatever          lt  div gt   lt  div gt     The attribute isolate-scrolling must contain the scrollable class and it all needs to be inside the scroll-container class or whatever class you choose and the locked class must be cascaded

User · Answer

Angular JS Directive  I had to wrap an angular directive  The following is a Mashup of the other answers here  tested on Chrome and Internet Explorer 11    var app   angular module  myApp     app directive  preventParentScroll   function          return           restrict   A           scope  false          link  function  scope  elm  attr                elm bind  mousewheel   onMouseWheel               function onMouseWheel e                    elm 0  scrollTop -   e wheelDeltaY     e originalEvent  amp  amp   e originalEvent wheelDeltaY    e originalEvent wheelDelta      e wheelDelta    0                   e stopPropagation                    e preventDefault                    e returnValue   false                                      Usage   lt div prevent-parent-scroll gt           lt  div gt      Hopes this helps the next person that gets here from a Google search

User · Answer

jQuery plugin with emulate natural scrolling for Internet Explorer      fn mousewheelStopPropagation   function options        options     extend              defaults         wheelstop  null    Function            options           Compatibilities     var isMsIE     Microsoft Internet Explorer      navigator appName       var docElt   document documentElement          mousewheelEventName    mousewheel       if  onmousewheel  in docElt            mousewheelEventName    mousewheel         else if  onwheel  in docElt            mousewheelEventName    wheel         else if  DOMMouseScroll  in docElt            mousewheelEventName    DOMMouseScroll             if  mousewheelEventName    return this         function mousewheelPrevent event            event preventDefault            event stopPropagation            if  function      typeof options wheelstop                options wheelstop event                        return this each function             var  this   this               this      this            this on mousewheelEventName  function event                var origiEvent   event originalEvent              var scrollTop    this scrollTop                  scrollMax    this scrollHeight -  this outerHeight                    delta   -origiEvent wheelDelta              if isNaN delta                     delta   origiEvent deltaY                            var scrollUp   delta  lt  0              if  scrollUp  amp  amp  scrollTop  lt   0       scrollUp  amp  amp  scrollTop  gt   scrollMax                     mousewheelPrevent event                 else if isMsIE                       Fix Internet Explorer and emulate natural scrolling                 var animOpt     duration 200  easing  linear                     if scrollUp  amp  amp  -delta  gt  scrollTop                         this stop true  animate   scrollTop 0    animOpt                       mousewheelPrevent event                     else if  scrollUp  amp  amp  delta  gt  scrollMax - scrollTop                         this stop true  animate   scrollTop scrollMax    animOpt                       mousewheelPrevent event                                                            https   github com basselin jquery-mousewheel-stop-propagation blob master mousewheelStopPropagation js

User · Answer

It is worth to mention that with modern frameworks like reactJS  AngularJS  VueJS  etc  there are easy solutions for this problem  when dealing with fixed position elements  Examples are side panels or overlaid elements   The technique is called a  Portal   which means that one of the components used in the app  without the need to actually extract it from where you are using it  will mount its children at the bottom of the body element  outside of the parent you are trying to avoid scrolling   Note that it will not avoid scrolling the body element itself  You can combine this technique and mounting your app in a scrolling div to achieve the expected result   Example Portal implementation in React s material-ui  https   material-ui-next com api portal

User · Answer

I was searching for this for MooTools and this was the first that came up  The original MooTools example would work with scrolling up  but not scrolling down so I decided to write this one    MooTools 1 4 5  http   jsfiddle net 3MzFJ  MooTools 1 3 2  http   jsfiddle net VhnD4  MooTools 1 2 6  http   jsfiddle net xWrw4      var stopScroll   function  e        var scrollTo   null      if  e event type      mousewheel             scrollTo    e event wheelDelta   -1         else if  e event type      DOMMouseScroll             scrollTo   40   e event detail            if  scrollTo            e preventDefault            this scrollTo 0  scrollTo   this scrollTop             return false       Usage    function          window addEvent  domready   function                 scrollable   addEvents                 mousewheel   stopScroll                DOMMouseScroll   stopScroll                        document id

User · Answer

There s also a funny trick to lock the parent s scrollTop when mouse hovers over a scrollable element  This way you don t have to implement your own wheel scrolling   Here s an example for preventing document scroll  but it can be adjusted for any element   scrollable mouseenter function        var scroll     document  scrollTop        document  on  scroll trap   function            if    document  scrollTop      scroll    document  scrollTop scroll              scrollable mouseleave function          document  off  scroll trap

User · Answer

I am adding this answer for completeness because the accepted answer by  amustill does not correctly solve the problem in Internet Explorer  Please see the comments in my original post for details  In addition  this solution does not require any plugins - only jQuery   In essence  the code works by handling the mousewheel event  Each such event contains a wheelDelta equal to the number of px which it is going to move the scrollable area to  If this value is  gt 0  then we are scrolling up  If the wheelDelta is  lt 0 then we are scrolling down    FireFox  FireFox uses DOMMouseScroll as the event  and populates originalEvent detail  whose   - is reversed from what is described above  It generally returns intervals of 3  while other browsers return scrolling in intervals of 120  at least on my machine   To correct  we simply detect it and multiply by -40 to normalize    amustill s answer works by canceling the event if the  lt div gt  s scrollable area is already either at the top or the bottom maximum position  However  Internet Explorer disregards the canceled event in situations where the delta is larger than the remaining scrollable space   In other words  if you have a 200px tall  lt div gt  containing 500px of scrollable content  and the current scrollTop is 400  a mousewheel event which tells the browser to scroll 120px further will result in both the  lt div gt  and the  lt body gt  scrolling  because 400   120   500   So - to solve the problem  we have to do something slightly different  as shown below   The requisite jQuery code is     document  on  DOMMouseScroll mousewheel     Scrollable   function ev        var  this     this           scrollTop   this scrollTop          scrollHeight   this scrollHeight          height    this innerHeight            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                In essence  this code cancels any scrolling event which would create the unwanted edge condition  then uses jQuery to set the scrollTop of the  lt div gt  to either the maximum or minimum value  depending on which direction the mousewheel event was requesting   Because the event is canceled entirely in either case  it never propagates to the body at all  and therefore solves the issue in IE  as well as all of the other browsers   I have also put up a working example on jsFiddle

User · Answer

I yoinked this from the chosen library  https   github com harvesthq chosen blob master coffee chosen jquery coffee  function preventParentScroll evt        var delta   evt deltaY    -evt wheelDelta     evt  amp  amp  evt detail      if  delta            evt preventDefault           if  evt type      DOMMouseScroll                 delta   delta   40                     fakeTable scrollTop   delta   fakeTable scrollTop         var el   document getElementById  some-id   el addEventListener  mousewheel   preventParentScroll  el addEventListener  DOMMouseScroll   preventParentScroll    This works for me

User · Answer

It s possible with the use of Brandon Aaron s Mousewheel plugin   Here s a demo  http   jsbin com jivutakama edit html js output

User · Answer

This actually works in AngularJS   Tested on Chrome and Firefox    directive  stopScroll   function          return           restrict   A           link  function  scope  element  attr                element bind  mousewheel   function  e                    var  this     this                       scrollTop   this scrollTop                      scrollHeight   this scrollHeight                      height    this height                        delta    e type     DOMMouseScroll                        e originalEvent detail   -40                           e originalEvent wheelDelta                       up   delta  gt  0                   var prevent   function                         e stopPropagation                        e preventDefault                        e 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

User · Answer

EDIT  CodePen example  For AngularJS  I defined the following directive   module directive  isolateScrolling   function        return       restrict   A         link  function  scope  element  attr            element bind  DOMMouseScroll   function  e              if  e detail  gt  0  amp  amp  this clientHeight   this scrollTop    this scrollHeight                this scrollTop   this scrollHeight - this clientHeight              e stopPropagation                e preventDefault                return false                        else if  e detail  lt  0  amp  amp  this scrollTop  lt   0                this scrollTop   0              e stopPropagation                e preventDefault                return false                                  element bind  mousewheel   function  e              if  e deltaY  gt  0  amp  amp  this clientHeight   this scrollTop  gt   this scrollHeight                this scrollTop   this scrollHeight - this clientHeight              e stopPropagation                e preventDefault                return false                        else if  e deltaY  lt  0  amp  amp  this scrollTop  lt   0                this scrollTop   0              e stopPropagation                e preventDefault                return false                         return true                                 And then added it to the scrollable element  the dropdown-menu ul     lt div class  dropdown  gt     lt button type  button  class  btn dropdown-toggle  gt Rename  lt span class  caret  gt  lt  span gt  lt  button gt     lt ul class  dropdown-menu  isolate-scrolling gt       lt li ng-repeat  s in savedSettings   objectToArray   orderBy  name  track by s name  gt         lt a ng-click  renameSettings s name   gt   s name   lt  a gt       lt  li gt     lt  ul gt   lt  div gt    Tested on Chrome and Firefox  Chrome s smooth scrolling defeats this hack when a large mousewheel movement is made near  but not at  the top or bottom of the scroll region

User · Answer

Simple solution with mouseweel event       element   bind  mousewheel   function e  d        console log this scrollTop this scrollHeight this offsetHeight 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

amustill s answer as a knockout handler   ko bindingHandlers preventParentScroll         init  function  element  valueAccessor  allBindingsAccessor  context              element  mousewheel function  e  d                var t     this               if  d  gt  0  amp  amp  t scrollTop       0                    e preventDefault                              else                   if  d  lt  0  amp  amp   t scrollTop      t get 0  scrollHeight - t innerHeight                           e preventDefault

User · Answer

Don t use overflow  hidden  on body  It automatically scrolls everything to the top  There s no need for JavaScript either  Make use of overflow  auto    HTML Structure   lt div class  overlay  gt       lt div class  overlay-content  gt  lt  div gt   lt  div gt    lt div class  background-content  gt      lengthy content here  lt  div gt    Styling   overlay      position  fixed      top  0px      left  0px      right  0px      bottom  0px      background-color  rgba 0  0  0  0 8         overlay-content           height  100           overflow  scroll            background-content      height  100       overflow  auto      Play with the demo here

[javascript] Prevent scrolling of parent element when inner element scroll position reaches top/bottom?

Examples related to javascript

Examples related to jquery

Examples related to scroll

Examples related to event-bubbling

Examples related to event-propagation