Javascript 如何在 div 的顶部和底部获得水平滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2274627/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get horizontal scrollbars at top and bottom of a div?
提问by Byron Sommardahl
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: autoin 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: autoCSS获得一个滚动条。是否有一些 JavaScript 可以从底部“克隆”滚动条并将其放置在 div 的顶部？也许还有其他方法？
回答by bobince
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 onscrollevents.
您可以在真实元素之上创建一个新的虚拟元素，具有相同的内容宽度以获得额外的滚动条，然后将滚动条与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 scrollWidthof 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.
这是一个可以改进的概念证明，例如。通过轮询或侦听可能更改scrollWidthof 的事件，element例如%在使用长度时调整窗口大小、字体大小更改或由其他脚本驱动的内容更改。IE 选择在元素内呈现水平滚动条以及 IE7 的页面缩放也存在（像往常一样）问题。但这是一个开始。
回答by Sampson
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 Slider 控件。您可以在 NetTuts 上在线阅读实现此效果的教程：http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/
