Scrolling a DIV beneath an absolutely postitioned element

Question

I have a simple website that features a scrollable div. It works fine, but I also need an absolutely positioned div over the top of it -- and I still need it to scroll as if it wasn't there.

You can see a crude JSFiddle here: http://jsfiddle.net/41rawrks/

You can scroll the div with your mousewheel (or trackpad), but if the cursor goes over the other element (like below), you can't scroll anymore. Can I change this?

I imagine it's because the DOM no longer considers the cursor to be "over" the scrollable element once it hits the draggable one (even though the draggable element is absolutely positioned within the scrollable one).

What can I do?

I wouldn't have thought it was possible, but this site does it!

http://weareeli.dk

Answer 1

If you switch the overflow from #scrollDiv80s to its parent #wrapper80s it works as you want:

#scrollDiv80s div {
    border: 1px solid black;
}
#wrapper80s, #wrapper90s, #wrapper00s {

    overflow-y: scroll; /* look at this */
    overflow-x: hidden; /* look at this */
    height: 100%;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}
.decadeHeader {
    background-color: red;
    position: absolute;
    width: 100%;
    z-index: 99999;
    font-size: 28px;
    text-align: center;
}
.decadeHeader:hover {
    cursor: grab;
    cursor: -webkit-grab;
}
#scrollDiv80s  {
    /* overflow from child removed */
    border: none;
    height: 100%;
}

Answer 2

The solution was a mixture of everything already mentioned.

pointer-events: none stopped the scroll getting stuck, but prevented the dragging option from working. The answer was to add pointer-events: none to the draggable element only when the column wasn't scrolling.

Monitoring the scroll event (without mouseclick) was easy, but I used the jQuery debounce to detect when scrolling had stopped.

scrollers.scroll($.debounce( 250, function(){
    // Re-enable drag event
    $(this).next('.decadeHeader').css('pointer-events', 'auto');
}));

Simple solution and works a treat!