infinity-virtual-table

by programus

HTML

<table>
  <thead>
    <tr>
      <th>
        ID
      </th>
      <th>
        Value
      </th>
    </tr>
  </thead>
  <tbody id="table-body">
    <tr>
      <td id="data-0-id">
        0
      </td>
      <td id="data-0-value">
        looooooooooooooooooooong-value-0
      </td>
    </tr>
    <tr>
      <td id="data-1-id">
        1
      </td>
      <td id="data-1-value">
        looooooooooooooooooooong-value-1
      </td>
    </tr>
    <tr>
      <td id="data-2-id">
        2
      </td>
      <td id="data-2-value">
        looooooooooooooooooooong-value-2
      </td>
    </tr>
    <tr>
      <td id="data-3-id">
        3
      </td>
      <td id="data-3-value">
        looooooooooooooooooooong-value-3
      </td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
}

table, td, th {
  border: 1px solid gray;
}

th {
  background-color: #eef;
}

JavaScript

function updateTable(event) {
  var topIdTd = document.getElementById('data-0-id');
  var topId = parseInt(topIdTd.innerHTML);
  topId += event.deltaY;
  for (var i = 0; i < 4; i++) {
    document.getElementById('data-' + i + '-id').innerHTML = topId + i;
    document.getElementById('data-' + i + '-value').innerHTML = 'looooooooooooooooooooong-value-' + topId + i;
  }
  return false;
}
var tbody = document.getElementById('table-body');
tbody.onwheel = updateTable;