How do I move the horizontal scroll bar to the top of the page? CSS or JS.

Thank!

  • Do you mean a horizontal scroll bar? - labris
  • Yes, horizontal, now I will correct the question - Lex

1 answer 1

To simulate the second horizontal scrollbar at the top of the element, you need to position another fake div above the element with the scroll bar, with a height sufficient for the scroll bar. And then assign the handlers scroll events to both elements to synchronize them when scrolling.

If you need to remove the bottom scrollbar, simply write overflow:hidden in its properties (in this case, wrapper2 ).

 $(function() { $(".wrapper1").scroll(function() { $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft()); }); $(".wrapper2").scroll(function() { $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft()); }); }); 
 .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; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> <div class="wrapper1"> <div class="div1"></div> </div> <div class="wrapper2"> <div class="div2"> <!-- Content Here --> </div> </div>
Example: http://jsfiddle.net/TBnqw/1/