Anzeige von Bildlaufleisten oben und unten an einem DIV

Question

Ich versuche obere & untere horizontale Bildlaufleisten für eine div anzuzeigen. Ich habe this SO question gefunden und den Seitencode entsprechend geändert.

HTML/Razor

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

Dieser Boden scrol zeigt Ibar wie normal, aber die obere Bildlaufleiste ist deaktiviert, was fehlt mir hier? Auch

Vielen Dank im Voraus

---

UPDATE

, wenn ich das Javascript zu entfernen, Ausgang ist gleich. Es scheint, dass Java Script Code nicht ausgeführt wird, aber keine Javascript Fehler aufgelistet sind.

Answer 1

Schließlich gelang es mit diesem Code zu beheben ...

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> 

Danke für die Antwort gegeben ... Es hat mir wirklich geholfen die Innere zu verstehen Arbeiten. :)

Answer 2

Sie können durch einige Optimierungen in Ihrem HTML und CSS wie unten angegeben erreichen;

HTML sollte wie folgt aussehen:

<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 sollte wie folgt aussehen:

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