Горизонтальный скролл — это удобный способ отображения большого количества контента в ограниченном пространстве. В этой статье я расскажу, как реализовать горизонтальную прокрутку для элементов в Elementor, используя CSS-селекторы и пользовательские стили.
Зачем нужен горизонтальный скролл?
Горизонтальный скролл особенно полезен в следующих случаях:
- Отображение карточек или изображений — например, галереи, продуктовые карточки или отзывы.
- Оптимизация мобильной версии — на маленьких экранах можно разместить больше контента без переноса строк.
- Создание уникального дизайна — горизонтальная прокрутка добавляет динамику и интерактивность.
selector {
max-height: none; /* Убираем ограничение по высоте /
max-width: 100%; / Ограничиваем ширину контейнера /
overflow-x: auto; / Включаем горизонтальную прокрутку /
overflow-y: hidden; / Отключаем вертикальную прокрутку /
white-space: nowrap; / Запрещаем перенос строк */
}
/* Ширина скроллбара /
selector::-webkit-scrollbar {
width: 14px; / Ширина горизонтального скроллбара /
height: 14px; / Высота горизонтального скроллбара */
}
/* Задний фон скроллбара /
selector::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1); / Фон скроллбара */
}
/* Цвет ползунка /
selector::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.31); / Цвет ползунка /
border-radius: 7px; / Закругление углов ползунка */
}
Заключение
Горизонтальный скролл — это мощный инструмент для создания динамичного и функционального дизайна. Благодаря простому CSS-коду вы можете легко реализовать его в Elementor и адаптировать под любые задачи. Если у вас возникнут вопросы или потребуется помощь с конкретным случаем, не стесняйтесь обращаться! 😊
