Как можно замедлить прокрутку внутри блока?

Question

Если прокручивать колесиком мышки

#table {
  height: 90px;
  overflow: auto;
}

<div id="table">
  <table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
  </table>
</div>

Хочу получить эффект, если допустим сделать колесиком мышки один раз вниз то прокрутить только на определенное количество пикселей вниз, например на 10px

Answer 1

document.querySelector('div#table').addEventListener('wheel', function(ev) {
  ev = window.event || ev;
  let delta = Math.max(-1, Math.min(1, (ev.wheelDelta || -ev.detail)));
  this.scrollTop -= (delta * 10); // количество пикселей = 10
  ev.preventDefault();
});

#table {
  height: 90px;
  overflow: hidden;
  box-shadow: inset 1px 3px 4px #000a;
}

<div id="table">
  <table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
  </table>
</div>

БЛОГ НА HUSL

Как можно замедлить прокрутку внутри блока?

Ответы (1 шт):