How can I get horizontal scrollbars at top and bottom of a div?

Question

Since I'm pretty sure there is no native html or CSS way of doing this, I'm open to doing this with JavaScript. Obviously, I can get a scrollbar at the bottom of my div using overflow: auto in CSS. Is there some JavaScript that could "clone" the scrollbar from the bottom and place it at the top of the div? Maybe there's another way?

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:27
I have a solution to this problem here, I noticed an odd bug with the solution accepted below that I have detailed and solved: https://stackoverflow.com/a/56384091/2430549 — HoldOffHunger, Jun 04 '19 at 17:57

score 48 · Accepted Answer · edited Oct 31 '17 at 14:27

You could create a new dummy element above the real one, with the same amount of content width to get an extra scrollbar, then tie the scrollbars together with onscroll events.

function DoubleScroll(element) {
    var scrollbar = document.createElement('div');
    scrollbar.appendChild(document.createElement('div'));
    scrollbar.style.overflow = 'auto';
    scrollbar.style.overflowY = 'hidden';
    scrollbar.firstChild.style.width = element.scrollWidth+'px';
    scrollbar.firstChild.style.paddingTop = '1px';
    scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
    scrollbar.onscroll = function() {
        element.scrollLeft = scrollbar.scrollLeft;
    };
    element.onscroll = function() {
        scrollbar.scrollLeft = element.scrollLeft;
    };
    element.parentNode.insertBefore(scrollbar, element);
}

DoubleScroll(document.getElementById('doublescroll'));

#doublescroll
{
  overflow: auto; overflow-y: hidden; 
}
#doublescroll p
{
  margin: 0; 
  padding: 1em; 
  white-space: nowrap; 
}

<div id="doublescroll">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
    </p>
</div>

This is a proof of concept that could be improved eg. by polling or listening for events that might change the scrollWidth of element, for example window resizes when % lengths are in use, font size changes, or content changes driven by other scripts. There are also (as usual) issues with IE choosing to render horizontal scrollbars inside the element, and IE7's page zooming. But this is a start.

Excellent solution. I want to use this technique all over my site, so I'm going to use a class name and do a jquery foreach like this: $(document).ready(function() { $('.doubleHorizontalScroll').each(function(index, element) { DoubleScroll(element); }); }); — Byron Sommardahl, Feb 16 '10 at 18:17
This works great for me! I also works great with
and document.getElementsByClassName('doublescroll')[0] (and of course . instead of # in the css) — Maikefer, Apr 22 '16 at 08:53

Sampson · Answer 2 · 2016-03-14T18:36:20.707

2

You could use jQuery's UI Slider control. You can read a tutorial for acheiving this effect online at NetTuts: http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/

edited Mar 14 '16 at 18:36

answered Feb 16 '10 at 16:56

Sampson

265,109
74
539
565

I thought of the same but out of the box, it seems to be able to do only vertical bars. Not sure how much work it would be to extend. – Pekka Feb 16 '10 at 16:58
I'm afraid I'm not seeing where jScrollPane allows you to put a scrollbar at the top of the div. Am I missing it? – Byron Sommardahl Feb 16 '10 at 17:03
@Byron your requirement is very specific, you may have to take an existing scrollbar widget and modify it. – Pekka Feb 16 '10 at 17:06
@Byron: Consider jQuery's UI Slider. I've added a link to it as well as a link to a tutorial showing how to use it. – Sampson Feb 16 '10 at 17:08

How can I get horizontal scrollbars at top and bottom of a div?

2 Answers2

Linked