一千萬個為什麽

搜索

如何在div的頂部和底部獲得水平滾動條?

由於我很確定沒有原生的html或css方式來做這件事,我很樂意用JavaScript做這件事。顯然,我可以在我的div的底部使用overflow:auto在CSS中獲得一個滾動條。是否有一些javascript可以從底部“克隆”滾動條並將其放在div的頂部?也許有另一種方式?

最佳答案

您可以在真實元素上創建一個新的虛擬元素,使用相同數量的內容寬度來獲得額外的滾動條,然後將滾動條與 onscroll 事件綁定在一起。

<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code">

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">
    
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.

</div>
</div> </div>

這是可以改進的概念證明,例如。通過輪詢或偵聽可能會更改元素scrollWidth 的事件,例如,當使用長度時,窗口會調整大小,字體大小會更改,或由其他腳本驅動的內容更改。 IE中也存在(通常)問題,選擇在元素內部渲染水平滾動條,以及IE7的頁面縮放。但這是一個開始。

轉載註明原文: 如何在div的頂部和底部獲得水平滾動條?