Top and Bottom Horizontal Scrollbar

Question

I have been searching for a couple of days now for a good solution to this problem.

I have a div that I need to add a second scroll bar to the top of, so that users dont have to scroll to the bottom in order to scroll horizontally.

The data within my div varies A LOT. I am trying to find a good way to capture the true width of the inside of the element so I can force the width of the dummy scroll bar div to be the same when I link them.

The content within the actual div is fetched from an AJAX call. I have tried including a div/p element with a width of auto, that gets returned from the AJAX call along with the data in order to have a single element that I can fetch the width from and apply to my second div. The problem is, when the div/p tag is returned, it only spans the visible part of the content div (tested with borders). I would need it to span the entire content div.

Any good solutions out their for second scroll bars with variable width content? JQuery/Javascript solutions are welcome.

enter image description here

Can you please provide a code example plus a mock-up basic example (using paint) to show the intended final result? It's hard to visualize what you really want to achieve. — Ismael Miguel, Jan 15 '15 at 16:27
Maybe this helps https://github.com/dreamerslab/jquery.actual — yunzen, Jan 15 '15 at 16:35
Possible duplicate of [horizontal scrollbar on top and bottom of table](http://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table) — Tot Zam, Mar 14 '16 at 16:26

score 0 · Answer 1 · answered Jan 15 '15 at 17:45

I came up with this fiddle:

http://jsfiddle.net/371g6mfa/

Basically its the jquery-ui slider demo from: http://jqueryui.com/slider/#side-scroll with additionally code:

HTML: after the first slider (if you put it on top, some strange things happen

<div class="scroll-bar-wrap ui-widget-content ui-corner-top" id="slider2">
    <div class="scroll-bar"></div>
</div>

JS:

//move things around for slider2
     slider2 = $('#slider2');
     slider2.css({
         top: (scrollContent.outerHeight() + slider2.outerHeight() * 2 - 1) * (-1)
     });
     scrollPane.css({
         'padding-top': slider2.height()
     }).height(scrollContent.height() + slider2.height() + 1);

The -1 and +1 are just added for some round bugs of the border I guess. I hope this helps a bit. You can start things like giving the sliders the same value and left position or something like that.

Top and Bottom Horizontal Scrollbar

1 Answers1