3

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

#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

1 ответ 1

4

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>

1
  • 3
    Спасибо! Идеально работает. Я уже думал что не существует такого решения 23 сен 2020 в 10:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.