Page Scroll + Internal Scrolling Div with JS and CSS

Question

I'm trying to create a seamless scroller for a page I'm building that has an internal scrolling div. Here's how I want it to work:

1. The user scrolls down the page until the scrollTop hits top of the div.
2. The div changes from overflow:hidden to overflow:scroll.
3. The user then scrolls through the div, until they hit the end.
4. The page begins scrolling again, and the div goes back from overflow:scroll to overflow:hidden again. (This is so if they reverse scrolling back up the page, when they hit the div it won't start scrolling prematurely.)

The process should work the same way in reverse. I thought using state might help. My three states are pre , on , and post . If you pass the threshold and your state is pre , it changes to on and the div "unlocks" for scrolling. Then, when you finish scrolling the div, it naturally pushes the entire page up. The state switched from on to post .

My problem is that if you scroll too speedily, the browser doesn't register these changes until it's too late, the div has already gone past. I wrote this code to manage the transition:

function onScroll() {
    if (cur_coord > cap_y && 
            cap_state == 'pre') { // Pre -> On
        container.css({ 'overflow-y':'scroll'});
        $(window).scrollTop(cap_y); 
        cap_state = 'on';
    } else if (cur_coord > cap_y && 
            cap_state == 'on') { // On -> Post
        container.css({ 'overflow-y':'hidden'});
        cap_state = 'post';
    } else if (cur_coord < cap_y && 
            cap_state == 'post') { // Post -> On
        container.css({ 'overflow-y':'scroll'});
        $(window).scrollTop(cap_y);
        cap_state = 'on';
    } else if (cur_coord < cap_y &&   
            cap_state == 'on') { // On -> Pre
        container.css({ 'overflow-y': 'hidden'});
        cap_state = 'pre';
    }
}

and I've created a fiddle to play with:

http://jsfiddle.net/vD8kQ/6/

Any thoughts one how I might make this a seamless scroll experience?

Thanks!

Answer 1

if you want to build your own scroller this is not an option. If you don't mind using a jQuery library... http://manos.malihu.gr/jquery-custom-content-scroller/