如何在div上創建兩個滾動條作爲頂部和底部？

Question

我如何在div頂部和底部創建兩個滾動條？

我正在網頁上工作。我已經要求內容div作爲候選展示候選細節的列表，全部在行列中。所以我需要Div頂部滾動條上的內容。

Answer 1

發現這個答案從SO本身.. here

下面是答案的fiddle。

HTML：

<div class="wmd-view-topscroll"> 
    <div class="scroll-div1"> 
    </div> 
</div> 
<div class="wmd-view"> 
    <div class="scroll-div2"> 
     @Html.Markdown(Model.Contents) @Html.Markdown(Model.Contents) @Html.Markdown(Model.Contents) @Html.Markdown(Model.Contents) @Html.Markdown(Model.Contents) @Html.Markdown(Model.Contents) @Html.Markdown(Model.Contents) @Html.Markdown(Model.Contents) 
    </div> 
</div> 

SCRIPT：

$(function(){ 
    $(".wmd-view-topscroll").scroll(function(){ 
     $(".wmd-view") 
      .scrollLeft($(".wmd-view-topscroll").scrollLeft()); 
    }); 
    $(".wmd-view").scroll(function(){ 
     $(".wmd-view-topscroll") 
      .scrollLeft($(".wmd-view").scrollLeft()); 
    }); 
}); 

CSS：

.wmd-view-topscroll, .wmd-view { 
    overflow-x: scroll; 
    overflow-y: hidden; 
    width: 300px; 
    border: none 0px RED; 
} 

.wmd-view-topscroll { height: 20px; } 
.wmd-view { height: 200px; } 
.scroll-div1 { 
    width: 1000px; 
    overflow-x: scroll; 
    overflow-y: hidden; 
} 
.scroll-div2 { 
    width: 1000px; 
    height:20px; 
}