How to link page scroll to a div element scroll? Or how to scroll div element using page scroll?

Question

So I have an issue with scrolling the page and some div with content inside it.

There is a .container at the bottom of the page and footer goes after it. When an user gets to the bottom of the page there should be possibility to continue scrolling the page but exactly the .scrollable container should be scrolled.

By default we can scroll .scrollable div's content if mouse cursor is over it. But I need to somehow link common page scroll to this .scrollable div's scroll.

How does this problem can be solved?

Here the JSFiddle link to make the issue more clear

Answer 1

$(window).on('mousewheel', function(e) {
    //scrolling bottom
    if(e.originalEvent.wheelDelta /120 <= 0) {
       //checks if we reached bottom
        if($(this).scrollTop() + $(this).height() == $(document).height()) {
            $('.scrollable').scrollTop($('.scrollable').scrollTop() + 10);
        } 
    }
});

EDIT: After lots of digging I've managed to build a script for exactly what you need

NOTE: The event is currently bound on mousewheel but there are more types of scrolling such as: dragging , clicking , arrow keys and I'm not aware of function to cover them all and do the thing you want in the same time.

I forked your Fiddle