Is there a way I can add a scrollbar to an overflow-x at the top instead of or as well as the bottom?

Question

I have

<div style="overflow-x: auto;">
   <table>
   ...
   ...
   </table>
</div>

This places a scroll bar at the bottom of my table. Is there a way that I could have this appear at the top of the table instead of or as well as the bottom ? Note that although I didn't use this I do have jQuery available if I need to use that. If anyone knows of the most well used jQuery scrollbar solution I would also like to know which to have a look at.

Note I'm using IE9 and above. Also I did see an answer out there but that's over 2 1/2 years old so I'm hoping some new way might have come up that I could use.

Answer 1

Well, the scrollbar's position is determined by the browser which inherits it from the operation system. There's no way you can move that sidebar.

You can however create something that functions as a scrollbar!

• jQuery Tiny scrollbar
• jQuery Custom content scroller
• jQuery jScrollPane
• jQuery Nanoscroller (doesn't support horizontal scrolling)

There are a vast amount of plugins so there's absolutely no need to write your own.

Answer 2

This can't be done only with CSS and HTML....add JS and below is your answer :
Source : horizontal scrollbar on top and bottom of table
JSFiddle

HTML

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div>

CSS

.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y:hidden;
}

.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }

.div1 {
  width:1000px;
  height: 20px;
}

.div2 {
  width:1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}

JS

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});