Single separated scroll bar instead of 3 tables scroll bars

Question

Is it possible to unite 3 scroll bars into one? I have method written down below that connects one bar, but how do i do that to connect more than one? Table can have different width. I tried to loop through tables and use += operator on scrollWrapper, thinking it has some kind of array or list that can contain single scroll event, but it seems it is not.

let tables = document.querySelectorAll(".table");
let scrollWrapper = document.querySelector(".scroll-bar");
let scrollBar = scrollWrapper.querySelector(".bar");

scrollBar.setAttribute("style", "width: 2000px;");

scrollWrapper.onscroll = function()
{
  tables[2].scrollLeft = scrollWrapper.scrollLeft;
}
tables[2].onscroll = function()
{
  scrollWrapper.scrollLeft = tables[2].scrollLeft;
}

.main {
  background-color: wheat;
}

.wrapper {
  width: 300px;
}

.table {
  overflow-x: scroll;
}

.table table{
  width: 1000px;
}

.table th,
.table td{
  padding: 3px 10px;
}

.scroll-bar {
  height: 20px;
  width: 100%;
  background-color: pink;
  overflow-x: scroll;
}

.scroll-bar .bar {
  height: 1px;
}

<div class="main">
  
  <div class="wrapper">
    
    <div class="table">
      
      <table>
        <thead>
          <tr>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
          </tr>
        </tbody>
      </table>
      
    </div>
      <div class="table">
      
      <table>
        <thead>
          <tr>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
          </tr>
        </tbody>
      </table>
      
    </div>
     <div class="table">
      
      <table>
        <thead>
          <tr>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
          </tr>
        </tbody>
      </table>
      
    </div>
    
  </div>
  
  <div class="scroll-bar">
    <div class="bar"></div>
  </div>
  
</div>

Can you use a loop over the tables, and then set the `onscroll` within the loop? At the moment you are only applying it to `tables[2]`, but you want to apply it to `tables[i]` for `i` in `tables.length`. — Billy Brown, Jun 17 '20 at 09:01
You can use a function to capture the index: https://stackoverflow.com/a/6487376/1406083 — Billy Brown, Jun 17 '20 at 09:10

score 2 · Accepted Answer · answered Jun 17 '20 at 09:08

i've wrapped your tables[2].scrollleft into a forloop to select all tables.

let tables = document.querySelectorAll(".table");
let scrollWrapper = document.querySelector(".scroll-bar");
let scrollBar = scrollWrapper.querySelector(".bar");

scrollBar.setAttribute("style", "width: 2000px;");

scrollWrapper.onscroll = function()
{
  for (i = 0; i < tables.length; i++){
    tables[i].scrollLeft = scrollWrapper.scrollLeft;
  }
}

.main {
  background-color: wheat;
}

.wrapper {
  width: 300px;
}

.table {
  overflow-x: scroll;
}

.table table{
  width: 1000px;
}

.table th,
.table td{
  padding: 3px 10px;
}

.scroll-bar {
  height: 20px;
  width: 100%;
  background-color: pink;
  overflow-x: scroll;
}

.scroll-bar .bar {
  height: 1px;
}

<div class="main">
  
  <div class="wrapper">
    
    <div class="table">
      
      <table>
        <thead>
          <tr>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
          </tr>
        </tbody>
      </table>
      
    </div>
      <div class="table">
      
      <table>
        <thead>
          <tr>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
          </tr>
        </tbody>
      </table>
      
    </div>
     <div class="table">
      
      <table>
        <thead>
          <tr>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
          </tr>
        </tbody>
      </table>
      
    </div>
    
  </div>
  
  <div class="scroll-bar">
    <div class="bar"></div>
  </div>
  
</div>

score 1 · Answer 2 · answered Jun 17 '20 at 09:18

you need to loop through each scrolling elements

possible example to start from

let tables = document.querySelectorAll(".table");
let scrollWrapper = document.querySelector(".scroll-bar");
let scrollBar = scrollWrapper.querySelector(".bar");

scrollBar.setAttribute("style", "width: 2000px;");

scrollWrapper.onscroll = function() {
  for (i = 0; tables.length; i++) {
    tables[i].scrollLeft = scrollWrapper.scrollLeft;
  }
}


for (i = 0; tables.length; i++) {
  tables[i].onscroll = function() {
    scrollWrapper.scrollLeft = this.scrollLeft;
  }
}

.main {
  background-color: wheat;
}

.wrapper {
  width: 300px;
}

.table {
  overflow-x: scroll;
}

.table table {
  width: 1000px;
}

.table th,
.table td {
  padding: 3px 10px;
}

.scroll-bar {
  height: 20px;
  width: 100%;
  background-color: pink;
  overflow-x: scroll;
}

.scroll-bar .bar {
  height: 1px;
}

<div class="main">

  <div class="wrapper">

    <div class="table">

      <table>
        <thead>
          <tr>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
          </tr>
        </tbody>
      </table>

    </div>
    <div class="table">

      <table>
        <thead>
          <tr>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
          </tr>
        </tbody>
      </table>

    </div>
    <div class="table">

      <table>
        <thead>
          <tr>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
            <th>Some header</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
            <td>Some text</td>
          </tr>
        </tbody>
      </table>

    </div>

  </div>

  <div class="scroll-bar">
    <div class="bar"></div>
  </div>

</div>

score 0 · Answer 3 · answered Jun 17 '20 at 09:12

0

If I correctly understand what is needed.

You can achieve this with css.

Remove

.table {
  overflow-x: scroll;
}

and add

.wrapper {
    width: 300px;
    overflow-x: scroll;
    position: relative;
}

Than you can manipulate scroll in javascript.

answered Jun 17 '20 at 09:12

Sergiy T.

1,433
1
23
25

it will scroll whole parent box. I needed only table. Imagine you have title above table. – John wantstoknow Jun 17 '20 at 11:52

Single separated scroll bar instead of 3 tables scroll bars

3 Answers3