Как сделать горизонтальную прокрутку таблицы Bootstrap 5?

Question

[skyfly2010]

Есть таблица с классом table-responsive. Она чудно себя ведет на всех разрешения экрана, но при условии, что перемещаем ее не мышью, а пальцем. Есть ли возможность добиться такого же эффекта при помощи курсора? Мне кажется, такой функционал должен быть очевиден и лежать на поверхности, но я не могу найти информацию о том, как этого добиться.

Answer 1

[skyfly2010]

Разобрался.
Нашел решение через использование dragscroll.js
Отлично работает, даже при загрузке таблиц через ajax. Главное не забывать реинициализировать dragscroll, каждый раз когда подгружается новая таблица.

Answer 2

[Данила]

<div class="table-responsive">
  <table class="table">

  </table>
</div>

<script>
  const tableContainer = document.querySelector('.table-responsive');
  
  tableContainer.addEventListener('wheel', function(e) {
    if (e.deltaY !== 0) {
      tableContainer.scrollLeft += e.deltaY;
      e.preventDefault();
    }
  });
</script>

Comments

[skyfly2010]

Попробовал. У меня не сработало. Вероятно, т.к. таблица целиком выгружается аяксом. Попробовал выполнить после загрузки таблицы - не сработало. Но спасибо за ответ.

[Сергей delphinpro]

skyfly2010,

document.querySelectorAll('.table-responsive').forEach(tableContainer => {
  
  tableContainer.addEventListener('wheel', function(e) {
    if (e.deltaY !== 0) {
      tableContainer.scrollLeft += e.deltaY;
      e.preventDefault();
    }
  });

});