Display scroll bars at the top and bottom of the DIV

Question

I am trying to display top and bottom horizontal scrollbars for a div . I found this SO question and changed the page code accordingly.

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> 

Displays the lower scroll bar as usual, but the upper scroll bar is disabled, what am I missing here?

Thanks in advance

---

UPDATE

Even when I remove javascript, the output is the same. It looks like Java Script code is not executing, but no javascript errors are reported.

Answer 1

Finally managed to fix it with this code ...

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> 

Thanks for the answer received ... It really helped me understand the Inner Work. :)

Answer 2

You can get some settings in your HTML and CSS, as shown below:

HTML should look like this:

 <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 should look like this:

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

WATCH DEMO