Как сделать прокрутку мышью и пальцем на телефоне блока с overflow: scroll или hidden?

Для реализации прокрутки мышью и пальцем на блоке с overflow: scroll или overflow: hidden можно использовать следующий подход.

1. Добавьте свойство overflow: auto или overflow-y: auto к блоку со скроллируемым контентом. Это позволит отобразить вертикальную полосу прокрутки, если содержимое блока превышает его размеры по высоте.

.scrollable-content {
  overflow: auto; /* или overflow-y: auto; */
}

2. Чтобы включить прокрутку с помощью колесика мыши, ничего дополнительного делать не нужно, так как это стандартное поведение браузера при наличии вертикальной полосы прокрутки.

3. Для активации прокрутки с использованием пальцев на мобильных устройствах, можно воспользоваться JavaScript для добавления обработчиков событий.

var element = document.querySelector('.scrollable-content');

element.addEventListener('touchstart', function(e) {
  this.touchStartPos = e.touches[0].clientY;
  this.scrollTopPos = this.scrollTop;
});

element.addEventListener('touchmove', function(e) {
  var touchPos = e.touches[0].clientY;
  var deltaY = touchPos - this.touchStartPos;
  this.scrollTop = this.scrollTopPos - deltaY;
  e.preventDefault();
});

Здесь мы добавляем обработчики событий touchstart и touchmove для отслеживания касаний и перемещений пальцев на элементе с классом .scrollable-content. Внутри обработчиков мы сохраняем начальную позицию касания и текущую позицию вертикальной полосы прокрутки, а затем изменяем позицию полосы прокрутки при перемещении пальца.

Обратите внимание, что мы вызываем e.preventDefault() в обработчике touchmove, чтобы предотвратить стандартное поведение браузера (например, скроллирование страницы), когда палец перемещается по элементу.

Это базовый способ реализации прокрутки мышью и пальцем на блоке с overflow: scroll или overflow: hidden в JavaScript. Однако, в зависимости от ваших требований, могут потребоваться дополнительные настройки или функциональность.