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

发布于 2024-08-21 07:51:13 字数 180 浏览 8 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

逆蝶 2024-08-28 07:51:13

您可以在真实元素之上创建一个新的虚拟元素，具有相同的内容宽度以获得额外的滚动条，然后将滚动条与 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>

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

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 onscroll events.

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 scrollWidth of 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.

回复收藏 0 原文