如何在div的顶部和底部设置水平滚动条?

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?

由于我非常确定没有本地html或css方式来实现这一点，所以我愿意使用JavaScript来实现这一点。显然，我可以在我的div底部使用overflow: auto在CSS中。是否有一些javascript可以从底部“克隆”滚动条并将其放在div的顶部?也许有另一种方式?

2 个解决方案

#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.

您可以在真实的元素之上创建一个新的虚拟元素，使用相同的内容宽度来获得一个额外的滚动条，然后将滚动条与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>

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.

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

#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/

您可以使用jQuery的UI滑块控件。在NetTuts: http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/上，您可以阅读一篇教程，了解这种效果