CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Robert E. McIntosh
Robert E. McIntosh

Reputation: 6135

Attach Horizontal Scrollbar to bottom of window if scrollable div is taller than window

I have a div that is taller than the window but is contained within a certain width. This causes the div to get a horizontal scrollbar at the very bottom. The problem with this is it makes it hard for users to scroll left and right within the div.

I would like to know if it is possible to attach a scrollbar to the bottom of the screen until the user scrolls down to the bottom of the div.

To give you an idea of what I would like to accomplish. Codrops created a nice table that once you scroll past the table header it attaches its self to the top of the screen. Here is the demo of that http://tympanus.net/Tutorials/StickyTableHeaders/. I want to do this but with a scrollbar attaching to the bottom of the screen. I am sorry I can't provide things I have tried, because I don't even know where to start when trying to accomplish this.

Upvotes: 2

Views: 1929

Answers (1)

Gromo
Gromo

Reputation: 1609

You can create empty container with the same width as your div and set it to fixed position. Then sync scrolling position of these 2 DIVs using jQuery. Example on jsFiddle.

jQuery(function($){
    $('.content').on('scroll', function(){
        $('.scroller').scrollLeft($(this).scrollLeft());
    });
    $('.scroller').on('scroll', function(){
        $('.content').scrollLeft($(this).scrollLeft());
    });
});

Hiding/showing external scrollbar depending on page scroll offset is left for you as homework :)

Upvotes: 1

Related Questions