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 > 0 && t.scrol…

Accepted 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

```
$(function() {

var toolbox = $('#toolbox'),
      height = toolbox.height(),
      scrollHeight = toolbox.get(0).scrollHeight;

toolbox.bind('mousewheel', function(e, d) {
    if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
      e.preventDefault();
    }
  });

});
```

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

Solution

Problem

Related problems