title: Displaying scroll bars on Top & Bottom of a DIV
body: <p>I'm trying to display top &amp; bottom horizontal scroll bars for a <code>div</code>. I found <a href="https://stackoverflow.com/questions/3934271/horizontal-scrollbar-on-top-and-bottom-of-table">this SO question</a> and changed page code accordingly.</p>
  
  <p><strong>HTML/Razor</strong></p>
  
  <pre><code>&lt;div class="wmd-view-topscroll"&gt;
      &lt;div class="scroll-div"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="wmd-view"&gt;
      @Html.Markdown(Model.Contents)
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.wmd-view-topscroll, .wmd-view
  {
      overflow-x: scroll;
      overflow-y: hidden;
      width: 1000px;
  }
  
  .scroll-div
  {
      width: 1000px;
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function(){
      $(".wmd-view-topscroll").scroll(function(){
          $(".wmd-view")
              .scrollLeft($(".wmd-view-topscroll").scrollLeft());
      });
      $(".wmd-view").scroll(function(){
          $(".wmd-view-topscroll")
              .scrollLeft($(".wmd-view").scrollLeft());
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>This displays bottom scrollbar as normal but the top scroll bar is disabled, what am I missing here?</p>
  
  <p>Thanks in advance</p>
  
  <hr>
  
  <p><strong>UPDATE</strong> </p>
  
  <p>Even when I remove the javascript, output is same. Seems Java Script code is not executing, but no javascript errors listed.</p>