如何在div的顶部和底部获得水平滚动条？

Question

由于我很确定没有原生的html或CSS方式来做这件事，我很乐意用JavaScript做这件事。 显然，我可以在我的div底部使用overflow: auto获取一个滚动条。 是否有一些JavaScript可以从底部“克隆”滚动条并将其放在div的顶部？ 也许有另一种方式？

Answer 1

您可以在真实元素上方创建一个新的虚拟元素，使用相同数量的内容宽度来获得额外的滚动条，然后将滚动条与onscroll事件绑定在一起。

 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> 

这是可以改进的概念证明，例如。 通过轮询或侦听可能更改element的scrollWidth的事件，例如，当使用%长度，字体大小更改或由其他脚本驱动的内容更改时，窗口会调整大小。 IE中也存在（通常）问题，选择在元素内部渲染水平滚动条，以及IE7的页面缩放。 但这是一个开始。

Answer 2

您可以使用jQuery的UI Slider控件 。 您可以在NetTuts上阅读在线获得此效果的教程： http ：//net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/