在DIV頂部和底部顯示滾動條

Question

我正在嘗試顯示頂部&底部水平滾動條，用於div。我發現this SO question並相應地更改了頁碼。

HTML /剃刀

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

CSS

.wmd-view-topscroll, .wmd-view 
{ 
    overflow-x: scroll; 
    overflow-y: hidden; 
    width: 1000px; 
} 

.scroll-div 
{ 
    width: 1000px; 
} 

的Javascript

<script type="text/javascript"> 
$(function(){ 
    $(".wmd-view-topscroll").scroll(function(){ 
     $(".wmd-view") 
      .scrollLeft($(".wmd-view-topscroll").scrollLeft()); 
    }); 
    $(".wmd-view").scroll(function(){ 
     $(".wmd-view-topscroll") 
      .scrollLeft($(".wmd-view").scrollLeft()); 
    }); 
}); 
</script> 

這將顯示底部scrol正常的lbar，但頂部滾動條被禁用，我在這裏錯過了什麼？

在此先感謝

---

UPDATE

即使當我刪除javascript，輸出是一樣的。似乎Java腳本代碼沒有執行，但沒有列出任何javascript錯誤。

Answer 1

終於設法與此代碼修復它...

HTML

<div class="wmd-view-topscroll"> 
    <div class="scroll-div"> 
     &nbsp; 
    </div> 
</div> 
<div class="wmd-view"> 
    <div class="dynamic-div"> 
     @Html.Markdown(Model.Contents) 
    </div> 
</div> 

CSS

.wmd-view-topscroll, .wmd-view 
{ 
    overflow-x: auto; 
    overflow-y: hidden; 
    width: 1000px; 
} 

.wmd-view-topscroll 
{ 
    height: 16px; 
} 

.dynamic-div 
{ 
    display: inline-block; 
} 

使用Javascript/JQuery的

<script type="text/javascript"> 
    $(function() { 

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

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

    }); 

    $(window).load(function() { 
     $('.scroll-div').css('width', $('.dynamic-div').outerWidth()); 
    }); 
</script> 

感謝給出了答案......這真的幫助我瞭解了內蒙古加工。 :)

Answer 2

你可以在你的HTML和CSS中進行一些調整，如下所示;

HTML應該是這樣：

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

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; 
} 

SEE DEMO