Scrolling A Div From Anywhere

When the bottom of my page (a.k.a. #main) comes into view jQuery toggles a class on my sidebar to make it scrollable using overflow-y: scroll — and overflow: hidden when the bot

Solution 1:

You can catch the scroll event of a mouse with the following code:

var mouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.xif (document.attachEvent) { //if IE (and Opera depending on user setting) document.attachEvent("on"+mouseWheelEvent, mouseWheelEventHandler);
} elseif (document.addEventListener) { //WC3 browsers document.addEventListener(mouseWheelEvent, mouseWheelEventHandler, false);
}

After this it is quite easy to see when someone scrolls, even though you have reached the end of the document. The mouseWheelEventHandler is the function that I passed to handle your mouseWheelEvent for you, it looks like this:

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

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

It will only scroll the sidebar if the sidebar has the class scrollable and if you are not already with your mouse on the sidebar, as it would scroll that element anyway and you would and up double scrolling it.

This should work on most browsers according to the following link: http://www.javascriptkit.com/javatutors/onmousewheel.shtml

And here is the fiddle to play with ofcourse: http://jsfiddle.net/ZZqLr/5/

EDIT

To complete the answer, we'll add the behaviour of it only scrolling the sidebar up instead of the page when you scroll up again, for this we only have to prevent the scrolling event by event.preventDefault() and add the following code at the end of the mouseWheelEventHandler:

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

the function then looks like this:

function mouseWheelEventHandler(e)
{
    if( !sidebar.hasClass('scrollable') && !sidebar.is(":hover") ) {
        returntrue;
    }
    varevent = window.event || e; //equalize event objectevent.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');
    }
}

Again you can play with it right here: http://jsfiddle.net/ZZqLr/6/

By the way, the waypoints.js is not even necessary for this, just for fun, one without the waypoints.js by removing the waypoint function and just adding the following in the eventHandle function:

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

    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');
    }
    returntrue;
}

And for playing with that as well, you might've guessed: http://jsfiddle.net/ZZqLr/7/

And that will be all, I guess :)