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

Question

由于我很确定没有本地html或css方式这样做,我愿意用JavaScript做这件事.显然,我可以在我的div的底部使用overflow:auto在CSS中获得一个滚动条.是否有一些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的页面缩放.但这是一个开始.