Одна отдельная полоса прокрутки вместо трех полос прокрутки таблиц - PullRequest
Новая
       0

Одна отдельная полоса прокрутки вместо трех полос прокрутки таблиц

1 голос
/ 17 июня 2020

Можно ли объединить 3 полосы прокрутки в одну? У меня есть описанный ниже метод, который соединяет одну панель, но как мне это сделать, чтобы подключить более одной? Стол может иметь разную ширину. Я пробовал l oop через таблицы и использовал оператор += на scrollWrapper, думая, что у него есть какой-то массив или список, который может содержать одиночное событие прокрутки, но похоже, что это не так. 

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>

Ответы [ 3 ]

2 голосов
/ 17 июня 2020

Я заключил ваш tables[2].scrollleft в форму oop, чтобы выбрать все таблицы. 

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>
1 голос
/ 17 июня 2020

вам нужно l oop через каждый элемент прокрутки

возможный пример, чтобы начать с 

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>
0 голосов
/ 17 июня 2020

Если я правильно понимаю, что нужно.

Вы можете добиться этого с помощью css.

Удалите 

.table {
  overflow-x: scroll;
}

и добавьте 

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

Чем вы можете управлять прокруткой в ​​javascript.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...