Organizational Research By

Surprising Reserch Topic

prevent scrolling of parent element

prevent scrolling of parent element  using -''

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 ?  

Working solution thanks to amustill (and Brandon Aaron for the mousewheel-plugin here:  

$(".ToolPage").bind('mousewheel', function(e, d)  
    var t = $(this);
    if (d > 0 && t.scrollTop() === 0) {
    else {
        if (d < 0 && (t.scrollTop() == t.get(0).scrollHeight - t.innerHeight())) {


asked Sep 9, 2015 by rajesh
0 votes

Related Hot Questions

Government Jobs Opening