horizontal scrollbar on top and bottom of table

Question

I ve a very large table on my page  So I decided to put a horizontal scrollbar on the bottom of the table  But I would like this scrollbar to be also on top on the table   What I have in the template is this    lt div style  overflow auto  width 100   height 130   gt   lt table id  data  style  width 100   gt     lt  table gt   lt  div gt    Is this possible to do in HTML and CSS only

User · Answer

You can use a jQuery plugin that will do the job for you       https   github com avianey jqDoubleScroll   The plugin will handle all the logic for you

User · Answer

a javascript only solution that s based on  HoldOffHunger and  bobince answers   lt div id  doublescroll  gt       function DoubleScroll element                var scrollbar  document createElement  div                scrollbar appendChild document createElement  div                 scrollbar style overflow   auto               scrollbar style overflowY   hidden               scrollbar firstChild style width  element scrollWidth  px               scrollbar firstChild style paddingTop   1px               scrollbar firstChild appendChild document createTextNode   xA0                 var running   false              scrollbar onscroll  function                     if running                        running   false                      return                                    running   true                  element scrollLeft  scrollbar scrollLeft                             element onscroll  function                     if running                        running   false                      return                                    running   true                  scrollbar scrollLeft  element scrollLeft                             element parentNode insertBefore scrollbar  element                  DoubleScroll document getElementById  doublescroll

User · Answer

In vanilla Javascript Angular you can do this like this   scroll         let scroller   document querySelector   above-scroller        let table   document querySelector   table        table scrollTo scroller scrollLeft 0         HTML    lt div class  above-scroller   scroll   scroll    gt     lt div class  scroller  gt  lt  div gt   lt  div gt   lt div class  table   gt     lt table gt  lt  table gt   lt  div gt    CSS    above-scroller       overflow-x  scroll     overflow-y hidden     height  20px     width  1200px      scroller     width 4500px    height  20px      table     width 100     height  100     overflow  auto

User · Answer

There is an issue with scroll direction  rtl  It seems the plugin doesn t support it correctly  Here is the fiddle  fiddle  Note that it works correctly in Chrome  but in all other popular browsers the top scroll bar direction remains left

User · Answer

First of all  great answer   StanleyH   If someone is wondering how to make the double scroll container with dynamic width    css   wrapper1   wrapper2   width  100   overflow-x  scroll  overflow-y  hidden     wrapper1   height  20px     div1   height  20px     div2   overflow  none      js    function              wrapper1   on  scroll   function  e                wrapper2   scrollLeft     wrapper1   scrollLeft                      wrapper2   on  scroll   function  e                wrapper1   scrollLeft     wrapper2   scrollLeft                   window  on  load   function  e            div1   width    table   width             div2   width    table   width           html   lt div class  wrapper1  gt       lt div class  div1  gt  lt  div gt   lt  div gt   lt div class  wrapper2  gt       lt div class  div2  gt           lt table gt               lt tbody gt                   lt tr gt                       lt td gt table cell lt  td gt                       lt td gt table cell lt  td gt                       lt  --     -- gt                       lt td gt table cell lt  td gt                       lt td gt table cell lt  td gt                   lt  tr gt               lt  tbody gt           lt  table gt       lt  div gt   lt  div gt    demo  http   jsfiddle net simo 67xSL

User · Answer

Try using the jquery doubleScroll plugin    jQuery      document  ready function          double-scroll   doubleScroll          CSS     double-scroll    width  400px      HTML     lt div id  double-scroll  gt     lt table id  very-wide-element  gt       lt tbody gt         lt tr gt           lt td gt  lt  td gt         lt  tr gt       lt  tbody gt     lt  table gt   lt  div gt

User · Answer

StanleyH s answer was excellent  but it had one unfortunate bug  clicking the shaded area of the scrollbar no longer jumps to the selection you click   Instead  what you get is a very small and somewhat annoying increment in the position of the scrollbar   Tested  4 versions of Firefox  100  affected   4 versions of Chrome  50  affected    Here s my jsfiddle  You can get around this with by having an on off  true false  var that allows only one onScroll   event to trigger at a time   var scrolling   false      wrapper1   scroll function        if scrolling          scrolling   false        return true            scrolling   true          wrapper2            scrollLeft     wrapper1   scrollLeft             wrapper2   scroll function        if scrolling          scrolling   false        return true              scrolling   true          wrapper1            scrollLeft     wrapper2   scrollLeft           Problem Behavior With Accepted Answer      Actually Desired Behavior      So  just why does this happen  If you run through the code  you ll see that wrapper1 calls wrapper2 s scrollLeft  and wrapper2 calls wrapper1 s scrollLeft  and repeat this infinitely  so  we have an infinite loop problem   Or  rather  the continued scrolling of the user conflicts with wrapperx s call of the scrolling  an event conflict occurs  and the end result is no jumping in the scrollbars   Hope this helps someone else out

User · Answer

As far as I m aware this isn t possible with HTML and CSS

User · Answer

Angular version I combined 2 answers here    simo and  bresleveloper  https   stackblitz com edit angular-double-scroll file src 2Fapp 2Fapp component html inline-component  Component     selector   app-double-scroll     changeDetection  ChangeDetectionStrategy OnPush    template         lt div class  quot wrapper1 quot   wrapper1 gt         lt div class  quot div1 quot   div1 gt  lt  div gt       lt  div gt       lt div class  quot wrapper2 quot   wrapper2 gt           lt div class  quot div2 quot   div2 gt               lt ng-content gt  lt  ng-content gt           lt  div gt       lt  div gt         styles                 wrapper1   wrapper2   width  100   overflow-x  auto  overflow-y  hidden                        div1   overflow  hidden  height  0 5px                       div2   overflow  hidden  min-width  min-content               export class DoubleScrollComponent implements AfterViewInit       ViewChild  wrapper1   wrapper1  ElementRef lt any gt      ViewChild  wrapper2   wrapper2  ElementRef lt any gt       ViewChild  div1   div1  ElementRef lt any gt      ViewChild  div2   div2  ElementRef lt any gt      constructor private  r  Renderer2  private  cd  ChangeDetectorRef            ngAfterViewInit          this  cd detach         this  r setStyle this div1 nativeElement   width   this div2 nativeElement clientWidth    px          this wrapper1 nativeElement onscroll   e   gt  this wrapper2 nativeElement scroll  e target as HTMLElement  scrollLeft  0      this wrapper2 nativeElement onscroll   e   gt  this wrapper1 nativeElement scroll  e target as HTMLElement  scrollLeft  0           example  lt div style  quot width  200px  border  1px black dashed quot  gt      lt app-double-scroll gt       lt div style  quot min-width  400px  background-color  red  word-break  keep-all  white-space  nowrap  quot  gt        long ass text long ass text long ass text long ass text long ass text long ass text long ass text long ass text long ass text       lt  div gt     lt  app-double-scroll gt      lt br gt     lt hr gt     lt br gt      lt app-double-scroll gt       lt div style  quot display  inline-block  background-color  green  word-break  keep-all  white-space  nowrap  quot  gt        short ass text      lt  div gt     lt  app-double-scroll gt      lt br gt     lt hr gt     lt br gt      lt app-double-scroll gt       lt table width  quot 100  quot  border  quot 0 quot  cellspacing  quot 0 quot  cellpadding  quot 0 quot  gt         lt tbody gt           lt tr gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt             lt td gt table cell lt  td gt           lt  tr gt         lt  tbody gt       lt  table gt     lt  app-double-scroll gt    lt  div gt

User · Answer

Without JQuery  2017   Because you might not need JQuery  here is a working Vanilla JS version based on  StanleyH answer    x000D   x000D  var wrapper1   document getElementById  wrapper1    x000D  var wrapper2   document getElementById  wrapper2    x000D  wrapper1 onscroll   function     x000D    wrapper2 scrollLeft   wrapper1 scrollLeft  x000D     x000D  wrapper2 onscroll   function     x000D    wrapper1 scrollLeft   wrapper2 scrollLeft  x000D     x000D   wrapper1   wrapper2 width  300px  border  none 0px RED  x000D  overflow-x  scroll  overflow-y hidden   x000D   wrapper1 height  20px    x000D   wrapper2 height  100px    x000D   div1  width 1000px  height  20px    x000D   div2  width 1000px  height  100px  background-color   88FF88  x000D  overflow  auto   x000D   lt div id  wrapper1  gt  x000D       lt div id  div1  gt  x000D       lt  div gt  x000D   lt  div gt  x000D   lt div id  wrapper2  gt  x000D       lt div id  div2  gt  x000D      aaaa bbbb cccc dddd aaaa bbbb cccc  x000D      dddd aaaa bbbb cccc dddd aaaa bbbb  x000D      cccc dddd aaaa bbbb cccc dddd aaaa  x000D      bbbb cccc dddd aaaa bbbb cccc dddd x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Expanding on StanleyH s answer  and trying to find the minimum required  here is what I implemented   JavaScript  called once from somewhere like   document  ready      function doubleScroll                topScrollVisible   scroll function                    tableWrapper                    scrollLeft     topScrollVisible   scrollLeft                             tableWrapper   scroll function                    topScrollVisible                    scrollLeft     tableWrapper   scrollLeft                     HTML  note that the widths will change the scroll bar length     lt div class  topScrollVisible  style  overflow-x scroll  gt       lt div class  topScrollTableLength  style  width 1520px  height 20px  gt       lt  div gt   lt  div gt   lt div class  tableWrapper  style  overflow auto  height 100    gt       lt table id  myTable  style  width 1470px  class  myTableClass  gt           lt  table gt    That s it

User · Answer

Based on  StanleyH solution I created an AngularJS directive  demo on jsFiddle   Easy to use    lt div data-double-scroll-bar-horizontal gt    content   or static content  lt  div gt    For AngularJS developers

User · Answer

To simulate a second horizontal scrollbar on top of an element  put a  dummy  div above the element that has horizontal scrolling  just high enough for a scrollbar  Then attach handlers of the  scroll  event for the dummy element and the real element  to get the other element in synch when either scrollbar is moved  The dummy element will look like a second horizontal scrollbar above the real element    For a live example  see this fiddle  Here s the code   HTML    lt div class  wrapper1  gt     lt div class  div1  gt  lt  div gt   lt  div gt   lt div class  wrapper2  gt     lt div class  div2  gt       lt  -- Content Here -- gt     lt  div gt   lt  div gt    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

User · Answer

Linking the scrollers worked  but in the way it s written it creates a loop which makes scrolling slow in most browsers if you click on the part of the lighter scrollbar and hold it  not when dragging the scroller    I fixed it with a flag     function         x   1          wrapper1   scroll function             if  x    1                x   0                  wrapper2                    scrollLeft     wrapper1   scrollLeft               else               x   1                              wrapper2   scroll function             if  x    1                x   0                  wrapper1                    scrollLeft     wrapper2   scrollLeft               else               x   1

User · Answer

to all angular nativeJs fans  implementing  simo s answer  HTML  no change    lt div class  top-scroll-wrapper  gt       lt div class  top-scroll  gt  lt  div gt   lt  div gt    CSS  no change  width  90  is my desing    top-scroll-wrapper   width  90  height  20px margin  auto padding  0 16px overflow-x  auto overflow-y  hidden    top-scroll   height  20px      JS  like onload  or ngAfterViewChecked  all the as are for TypeScript   let  topscroll   document querySelector   top-scroll   as HTMLElement let  topscrollWrapper   document querySelector   top-scroll-wrapper   as HTMLElement let  table   document querySelectorAll  mat-card   3  as HTMLElement   topscroll style width   totalWidth    px   topscrollWrapper onscroll   e   gt   table scroll  e target as HTMLElement  scrollLeft  0   table onscroll   e   gt   topscrollWrapper scroll  e target as HTMLElement  scrollLeft  0

User · Answer

An AngularJs directive for achieving this  To use it  add css class double-hscroll to your element  You will need jQuery and AngularJs for this   import angular from  angular    var app   angular module  plunker        app controller  MainCtrl   function  scope   compile       scope name    Dual wielded horizontal scroller        app directive  doubleHscroll   function  compile      return   restrict   C   link  function scope  elem  attr      var elemWidth   parseInt elem 0  clientWidth      elem wrap   lt div id  wrapscroll  style  width   elemWidth px overflow scroll  gt  lt  div gt          note the top scroll contains an empty space as a  trick         wrapscroll   before   lt div id  topscroll  style  height 20px  overflow scroll width   elemWidth px  gt  lt div style  min-width   elemWidth px  gt    lt  div gt  lt  div gt          function            topscroll   scroll function              wrapscroll   scrollLeft     topscroll   scrollLeft                     wrapscroll   scroll function               topscroll   scrollLeft     wrapscroll   scrollLeft

User · Answer

Here is an example for VueJS  index page   lt template gt     lt div gt       lt div ref  topScroll  class  top-scroll   scroll passive  handleScroll  gt         lt div          style              width     contentWidth px             height   12px                     gt       lt  div gt       lt div ref  content  class  content   scroll passive  handleScroll  gt         lt div          style              width     contentWidth px                    gt          Lorem ipsum dolor sit amet  ipsum dictum vulputate molestie id magna          nunc laoreet maecenas  molestie ipsum donec lectus ut et sit  aut ut ut         viverra vivamus mollis in  integer diam purus penatibus  Augue consequat         quis phasellus non  congue tristique ac arcu cras ligula congue  elit         hendrerit lectus faucibus arcu ligula a  id hendrerit dolor nec nec         placerat  Vel ornare tincidunt tincidunt  erat amet mollis quisque  odio         cursus gravida libero aliquam duis  dolor sed nulla dignissim praesent         erat  voluptatem pede aliquam  Ut et tellus mi fermentum varius  feugiat         nullam nunc ultrices  ullamcorper pede  nunc vestibulum  scelerisque         nunc lectus integer  Nec id scelerisque vestibulum  elit sit  cursus         neque varius  Fusce in  nunc donec  volutpat mauris wisi sem  non         sapien  Pellentesque nisl  lectus eros hendrerit dui  In metus aptent         consectetuer  sociosqu massa mus fermentum mauris dis  donec erat nunc         orci         lt  div gt       lt  div gt     lt  div gt   lt  template gt    lt script gt  export default     data         return         contentWidth  1000              methods        handleScroll event          if  event target  prevClass      content             this  refs topScroll scrollLeft   this  refs content scrollLeft         else           this  refs content scrollLeft   this  refs topScroll scrollLeft                      lt  script gt    lt style lang  scss  scoped gt   top-scroll   content     overflow  auto    max-width  100      top-scroll     margin-top  50px     lt  style gt     TAKE NOTE on the height  12px   I made it 12px so it will be noticed on Mac Users as well  But w  windows  0 1px is good enough

User · Answer

There is one way to achieve this that I did not see anybody mentioning here  By rotating the parent container by 180 degrees and the child-container again by 180 degrees the scrollbar will be shown at top  parent     transform  rotateX 180deg     overflow-x  auto      child     transform  rotateX 180deg      For reference see the issue in the w3c repository

User · Answer

If you are using iscroll js on webkit browser or mobile browser  you could try       pageWrapper gt div last-child   css  top    0px

[javascript] horizontal scrollbar on top and bottom of table

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css