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

javascript html css scrollbar

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>

Expand snippet