Перемещение элементов внутри блока колесиком мышыи

1. Задаем блоку видимость авто

2. Создаем элементы за гранью видимости блока

3. Вставляем код на страницу

<style>
.horizontal-scrolled-container {
  display: flex;
  overflow-x: hidden;
  
  max-width: 180rem;
  margin: 0 auto;
}

.horizontal-scrolled-container p {
  font-family: sans-serif;
  
  border-radius: 8px;
  background: #ff6961;
  color: white;
  
  padding: 2rem 3rem;
  margin: 2rem 1rem;
}
</style>
<script>
const horizontalScrolledContainers = document.querySelectorAll(".horizontal-scrolled-container");

console.log(horizontalScrolledContainers)

horizontalScrolledContainers.forEach((container) => {
    container.addEventListener('wheel', (event) => {
      const { scrollWidth, clientWidth, scrollLeft } = container;
      if ((
        clientWidth + scrollLeft < scrollWidth && event.deltaY > 0
      ) || (
        scrollLeft > 0 && event.deltaY < 0
      )) {
      event.preventDefault();
      container.scrollLeft += event.deltaY;
      }
    })
});
</script>

==================================

Памятка!

Вместо 
overflow-x: hidden 
лучше написать
overflow-x: scroll

А то на айфоне с hidden нельзя прокручивать :)

Правка от Антона

===================================

Присвоением блоку класс css: horizontal-scrolled-container

=======================================================

Огромное спасибо Антону в решение задачи

Все!

Ну а че:) Спасибо можно сказать тут