Scrolling Div from Anywhere

Question

When the bottom of my page (aka #main) appears , jQuery toggles the class in the sidebar to make it scrollable with overflow-y: scroll- and overflow: hiddenwhen the bottom of the page is not displayed.

The desired effect here should be at the bottom of the page (again, in my example, that div #main), but allow the sidebar to keep scrolling, provided that there is more content.

So, if you continue to scroll #maineven after you reach the bottom, the sidebar will start to scroll.

The problem right now is that the desired scroll effect only works when the cursor is over #sidebar. I would like it to be more natural and accessible to scroll without the cursor that should be above #sidebar.

HTML

<div id="container">
    <div id="header"></div>

    <div id="main"> 
        <p>Lorem ipsum dolor sit amet, [...]</p>   
    </div>
    <div id="sidebar">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>
            [...]
         </ul>
    </div>
</div>

Javascript

$('#sidebar').height( $('#main').height() );

$('#main').waypoint(function() {
    $('#sidebar').toggleClass('scrollable');
}, { offset: 'bottom-in-view' });

I installed the fiddle for my question here: http://jsfiddle.net/ZZqLr/

---

Follow-up: . Approaching the problem from a different angle, I managed to achieve the desired effect.

This time, when the bottom appears #main, it is fixed at the bottom of the window, and #sidebarcontinues to scroll freely. It's a little hack, but visually identical for my needs.

http://jsfiddle.net/ZZqLr/1/

Answer 1

:

var mouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x

if (document.attachEvent) { //if IE (and Opera depending on user setting) 
    document.attachEvent("on"+mouseWheelEvent, mouseWheelEventHandler);
} else if (document.addEventListener) { //WC3 browsers 
    document.addEventListener(mouseWheelEvent, mouseWheelEventHandler, false);
}

, - , . mouseWheelEventHandler - , mouseWheelEvent , :

function mouseWheelEventHandler(e)
{
    if( !sidebar.hasClass('scrollable') && !sidebar.is(":hover") ) {
        return true;
    }

    var event = window.event || e; //equalize event object
    var delta = event.detail ? event.detail*(-120) : event.wheelDelta; //check for detail first so Opera uses that instead of wheelDelta
    sidebar.scrollTop(sidebar.scrollTop()-delta);        
}

, , , , .

: http://www.javascriptkit.com/javatutors/onmousewheel.shtml

, , , http://jsfiddle.net/ZZqLr/5/

, , , event.preventDefault() mouseWheelEventHandler:

if( sidebar.scrollTop() == 0 ) {
    sidebar.removeClass('scrollable');
}

:

function mouseWheelEventHandler(e)
{
    if( !sidebar.hasClass('scrollable') && !sidebar.is(":hover") ) {
        return true;
    }
    var event = window.event || e; //equalize event object
    event.preventDefault();
    var delta = event.detail ? event.detail*(-120) : event.wheelDelta; //check for detail first so Opera uses that instead of wheelDelta
    sidebar.scrollTop(sidebar.scrollTop()-delta);
    if( sidebar.scrollTop() == 0 ) {
        sidebar.removeClass('scrollable');
    }
}

: http://jsfiddle.net/ZZqLr/6/

, waypoints.js , , . js, eventHandle:

function mouseWheelEventHandler(e)
{
    if( !sidebar.hasClass('scrollable') && !sidebar.is(":hover") ) {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            sidebar.addClass('scrollable');
        }
        return true;
    }

    var event = window.event || e; //equalize event object
    event.preventDefault();
    var delta = event.detail ? event.detail*(-120) : event.wheelDelta; //check for detail first so Opera uses that instead of wheelDelta
    sidebar.scrollTop(sidebar.scrollTop()-delta);
    if( sidebar.scrollTop() == 0 ) {
        sidebar.removeClass('scrollable');
    }
    return true;
}

, , : http://jsfiddle.net/ZZqLr/7/

, ...