How can I get horizontal scrollbars at top and bottom of a div?
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/
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.