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

Question

因为我很确定没有原生的 html 或 CSS 方法可以做到这一点，所以我愿意使用 JavaScript 来做到这一点。显然，我可以在 CSS 中使用 overflow: auto 在我的 div 底部获得一个滚动条。是否有一些 JavaScript 可以从底部“克隆”滚动条并将其放置在 div 的顶部？也许还有其他方法？

Answer 1

您可以在真实元素之上创建一个新的虚拟元素，使用相同的内容宽度来获得额外的滚动条，然后将滚动条与 onscroll 事件绑定(bind)在一起。

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>

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