Question

How may I do the trick to scroll outside of the div and action will be assigned to the fixed div with hidden overflow in my case is #scrollable_content.

HTML

<div id="container">
<div id="header">Header</div>        
    <div id="scrollable_content">
        Very long content<br />
        Very long content<br />
        ...
        Very long content<br />
        Very long content<br />        
    </div>
<div id="footer">Footer</div>

​

CSS

html, body {
    height:100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
div { margin: 0; padding: 0;}
div#header{position:absolute;top:0;width:100%;border:1px solid black;}
div#footer{position:absolute; bottom:0; width:100%; border:1px solid black;}

div#scrollable_content {
    height: 300px;
    overflow-y:auto;
    position: static;
    border: 1px solid green;
    margin: 150px;
}

​

This is the example http://jsfiddle.net/gtyBn/

Answer 1

This code will do the trick, although you may need to adjust how the handler works a bit. Most of this code comes from http://www.adomas.org/javascript-mouse-wheel/, although I did modify the handle function to fit your needs.

/** This is high-level function.
 * It must react to delta being more/less than zero.
 */
function handle(delta) {
    var target = $('#scrollable_content');
    var top = target.scrollTop() - delta;
    target.scrollTop(top);
}

/** Event handler for mouse wheel event.
 */
function wheel(event){
    var delta = 0;
    if (!event) /* For IE. */
            event = window.event;
    if (event.wheelDelta) { /* IE/Opera. */
            delta = event.wheelDelta/120;
    } else if (event.detail) { /** Mozilla case. */
            /** In Mozilla, sign of delta is different than in IE.
             * Also, delta is multiple of 3.
             */
            delta = -event.detail/3;
    }

    /** If delta is nonzero, handle it.
     * Basically, delta is now positive if wheel was scrolled up,
     * and negative, if wheel was scrolled down.
     */
    if (delta) handle(delta);

    /** Prevent default actions caused by mouse wheel.
     * That might be ugly, but we handle scrolls somehow
     * anyway, so don't bother here..
     */
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}


if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;