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>

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

Answer 2

您可以使用jQuery UI Slider control。您可以在NetTuts上阅读有关在线实现此效果的教程：http://net.tutsplus.com/tutorials/javascript-ajax/making-a-content-slider-with-jquery-ui/

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

2 个答案: