title: How to disable scrolling in outer elements?
body: <p>I have a vertically-scrolling div within a page that also scrolls vertically.</p>
  
  <p>When the child div is scrolled with the mouse wheel and reaches the top or bottom of the scroll bar, the page (body) begins to scroll.  While the mouse is over the child div, I'd like the page (body) scroll to be locked.</p>
  
  <p><a href="https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily">This SO post (scroll down to the selected answer)</a> demonstrates the problem well.</p>
  
  <p><a href="https://stackoverflow.com/questions/2978075/how-to-prevent-mouse-scrolling-outside-hovered-element">This SO question</a> is essentially the same as mine, but the selected answer causes my page contents to noticeably shift horizontally as the scrollbar disappears and reappears.</p>
  
  <p>I thought there might be a solution that leverages event.stopPropagation(), but couldn't get anything to work.  In ActionScript, this kind of thing would be solved by placing a mousewheel handler on the child div that calls stopPropagation() on the event before it reaches the body element.  Since JS and AS are both ECMAScript languages, I thought the concept might translate, but it didn't seem to work.</p>
  
  <p>Is there a solution that keeps my page contents from shifting around?  Most likely using stopPropagation rather than a CSS fix?  JQuery answers are welcome as is pure JS.</p>