javascript – 如何获得水平滚动条的顶部和底部的div?

因为我很肯定没有原生html或css的方式这样做,我开放使用JavaScript。显然,我可以得到一个滚动条在我的div的底部使用overflow:auto在CSS。有没有一些javascript,可以“克隆”滚动条从底部,并将它放在div的顶部?也许有另一种方式?
您可以在真实内容上创建一个新的哑元素,使用相同的内容宽度获取额外的滚动条,然后将滚动条与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的事件,例如窗口在使用%长度时更改大小,字体大小更改或由其他脚本驱动的内容更改。还有(像往常一样)IE选择在元素内部渲染水平滚动条,和IE7的页面缩放的问题。但这是一个开始。

http://stackoverflow.com/questions/2274627/how-can-i-get-horizontal-scrollbars-at-top-and-bottom-of-a-div

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 如何获得水平滚动条的顶部和底部的div?