在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