0

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

evileyes
  • 11
  • 3

1 Answers1

0
$(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

rollingthedice
  • 1,095
  • 8
  • 17
  • thanks for the answer, but I don't need to sync page and div scroll. I need to continue scrolling when the user gets to the bottom. May be that should be done using CSS only? I don't know, unfortunately – evileyes Jan 11 '19 at 18:24
  • Sorry for misunderstanding you. Updated. – rollingthedice Jan 11 '19 at 19:17