Menu
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?
676
To simulate a second horizontal scrollbar on top of an element, put a "dummy" div above the element that has horizontal scrolling, just high enough for a scrollbar. Then attach handlers of the "scroll" event for the dummy element and the real element, to get the other element in synch when either scrollbar is moved.
For horizontal scrollable bar use the x and y-axis. Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line.
To find horizontal scroll position, use the jQuery scrollLeft() method.
Basic Horizontal Scroll Box To make a scroll box with a horizontal scroll, you need to use the overflow-x property. Specifically, you need to use this code: overflow-x:scroll; . This tells your browser to create scroll bars on the x (horizontal) axis, whenever the contents of the container is too wide.
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.
102
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
