JSFiddle - React, Tailwind, and code Playground

by knightgao

HTML

<div class="headerWrapper wrapper">
  <table>
    <colgroup>
      <col width="400">
      <col width="400">
      <col width="400">
      <col width="400">
    </colgroup>
    <thead>
      <tr>
        <th>冲动</th>
        <th>的</th>
        <th>惩</th>
        <th>罚</th>
      </tr>
    </thead>
  </table>

</div>
<div class="bodyWrapper wrapper">
  <table>
    <colgroup>
      <col width="400">
      <col width="400">
      <col width="400">
      <col width="400">
    </colgroup>
    <tbody>
      <tr>
        <td>那夜我喝醉了拉着你的手</td>
        <td>胡乱地说话</td>
        <td>只顾着自己心中压抑的想法</td>
        <td>狂乱地表达</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="bodyWrapper wrapper">
  <table>
    <colgroup>
      <col width="400">
      <col width="400">
      <col width="400">
      <col width="400">
    </colgroup>
    <tbody>
      <tr>
        <td>我迷醉的眼睛已看不清你表情</td>
        <td>忘记了你当时会有怎样的反应</td>
        <td>我拉着你的手放在我手心</td>
        <td>我错误地感觉到你也没有生气</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="bodyWrapper wrapper">
  <table>
    <colgroup>
      <col width="400">
      <col width="400">
      <col width="400">
      <col width="400">
    </colgroup>
    <tbody>
      <tr>
        <td>所以我以为</td>
        <td>你会明白我的良苦用心</td>
        <td>直到你转身离去那一刻起</td>
        <td>逐渐地清醒</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="bodyWrapper wrapper">
  <table>
    <colgroup>
      <col width="400">
      <col width="400">
      <col width="400">
      <col width="400">
    </colgroup>
    <tbody>
      <tr>
        <td>才知道把我世界强加给你</td>
        <td>还需要勇气</td>
        <td>在你的内心里是怎样对待感情</td>
        <td>直到现在你都没有对我提起</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="bodyWrapper wrapper">
  <table>
    <colgroup>
      <col width="400">
      <col width="400">
      <col width="400">
      <col width="400">
    </colgroup>
    <tbody>
      <tr>
        <td>我自说自话简单的想法</td>
        <td>在你看来这根本就是一个笑话</td>
        <td>所以我伤悲</td>
       ...

CSS

.wrapper{
  width:600px;
  overflow: auto;
}

.wrapper > table{
  width:2000px;
  
}
.headerWrapper{
  overflow: hidden;
}

JavaScript

function ready() {

  const nodes = document.getElementsByClassName("wrapper");

  function initScroller(nodes) {
    let max = nodes.length
    if (!max || max === 1) return
    let limit = 0; 
    nodes.forEach((ele, index) => {
      ele.addEventListener('scroll', function() {
        window.requestAnimationFrame(() => {
          if (!limit) { 
            limit = max - 1;
            let top = this.scrollTop
            let left = this.scrollLeft
            for (node of nodes) {
              if (node === this) continue;
              node.scrollTo(left, top);
            }
          } else
            --limit;
        })
      }, {
        passive: true
      });
    });
  }

  initScroller([...nodes]);
  
  
  
  
}

document.addEventListener("DOMContentLoaded", ready);