Задаем блоку видимость авто
Создаем элементы за гранью видимости блока
Вставляем код на страницу
<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
=======================================================
Огромное спасибо Антону в решение задачи
See the Pen How to create horizontal scroll with mouse wheel using JavaScript by Anton (@nvkzNemo) on CodePen.
Все!