prevent Scroll bubbling from element to window

Solved (for some browsers) using a simple CSS property:
overscroll-behavior:

auto The default scroll overflow behavior occurs as normal.

contain Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighboring scrolling areas, e.g. underlying elements will not scroll.

none No scroll chaining occurs to neighboring scrolling areas, and default scroll overflow behavior is prevented.

body{
  height: 600px;
  overflow: auto;
}

section{
  width: 50%;
  height: 50%;
  overflow: auto;
  background: lightblue;
  overscroll-behavior: none; /*   <--- the trick    */
}

section::before{
  content: '';
  height: 200%;
  display: block;
}

<section>
 <input value='end' />
</section>

Simply apply that style property on the element which the scroll should be "locked-in" to and the scroll event will not bubble up to any parent element which might have a scroll as well.

Same demo as above but without the trick:

body{
  height: 600px;
  overflow: auto;
}

section{
  width: 50%;
  height: 50%;
  overflow: auto;
  background: lightblue;
}

section::before{
  content: '';
  height: 200%;
  display: block;
}

<section>
 <input value='end' />
</section>

If we cannot prevent window scrolling, why not undo it? That is, catching the scroll event and then scrolling back to a fixed position.

The following code locks the Y-Axis as long as one hovers over $("#popup"):

// here we store the window scroll position to lock; -1 means unlocked
var forceWindowScrollY = -1;

$(window).scroll(function(event) {
  if(forceWindowScrollY != -1 && window.scrollY != forceWindowScrollY) {
    $(window).scrollTop(forceWindowScrollY);    
  }
});

$("#popup").hover(function() {
  if(forceWindowScrollY == -1) {
    forceWindowScrollY = $(window).scrollTop();
  }
}, function() {
  forceWindowScrollY = -1;
});

I use this for the query suggest box on http://bundestube.de/ (enter some characters into the top search box to make the scrollable pane visible):

This works flawlessly in Chrome/Safari (Webkit) and with some scrolling glitches in Firefox and Opera. For some reason, it does not work with my IE installation. I guess this has to do with jQuery's hover method, which appears to not work correctly in 100% of all cases.

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);
}

As of now in 2018 and onwards e.preventDefault is enough.

$('.elementClass').on("scroll", function(e){
    e.preventDefault();
 }); 

This will prevent scroll to parent.

That's how I solved the problem:

I call the following when I open the popup:

$('body').css('overflow','hidden');

Then, when I close the popup I call this:

$('body').css('overflow','auto');

The popup is meant to be modal so no interaction is required with the underlying body

Works pretty well

Try the below code:

var container = document.getElementById('a');
container.onwheel = (e) => {
    const deltaY = e.wheelDeltaY || -(e.deltaY * 25); // Firefox fix
    container.scrollTop -= deltaY;
    e.preventDefault();
    e.stopPropagation();
    e.returnValue = false;
};