How can I get horizontal scrollbars at top and bottom of a div?
Solution 1
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.
Solution 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/
Byron Sommardahl
Byron has been developing software since he was 9 years old, coding RPG's on his Commodore 64 and his best friend's Apple IIe. When he was just 14, he developed a driver dispatch program for a large home repair company, a pawn shop management program, and a POS for clothing stores (that one is still in production). Since then, software development has been a constant and consuming passion for Byron. In 2010, Byron and some friends founded a software development company, Acklen Avenue, that has now grown to more than 50 distributed employees and runs multiple simultaneous agile software development projects daily. Byron is a true believer in anything that improves software maintainability, usability, and delivery.
Updated on June 05, 2020Comments
-
Byron Sommardahl almost 4 years
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? -
Pekka about 14 yearsI 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.
-
Byron Sommardahl about 14 yearsI'm afraid I'm not seeing where jScrollPane allows you to put a scrollbar at the top of the div. Am I missing it?
-
Pekka about 14 years@Byron your requirement is very specific, you may have to take an existing scrollbar widget and modify it.
-
Sampson about 14 years@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.
-
Byron Sommardahl about 14 yearsExcellent 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); }); });
-
Maikefer about 8 yearsThis works great for me! I also works great with <div class="doublescroll"> and document.getElementsByClassName('doublescroll')[0] (and of course . instead of # in the css)
-
rommyarb about 2 yearsVery nice solution. Works for me. Thank you brother ❤️