Горизонтальная прокрутка CSS: примеры и решения

Пример горизонтального скролла CSS

Чтобы добавить горизонтальную прокрутку в CSS, можно использовать следующее решение:

.container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

Этот код позволяет создать горизонтальный скролл для содержимого, выходящего за пределы контейнера. Свойство overflow-x: auto автоматически добавляет полосу прокрутки, когда содержимое превышает ширину элемента.

Как убрать горизонтальную прокрутку CSS

Если на странице появляется нежелательная горизонтальная прокрутка, её можно легко отключить:

body {
  overflow-x: hidden;
}

Этот код полностью отключает горизонтальную прокрутку для всего документа, что может быть полезно для мобильных версий сайтов или когда контент случайно выходит за пределы видимой области.

Horizontal scroll CSS с flexbox

Для создания горизонтальной прокрутки с использованием flexbox можно применить следующий код:

.flex-scroll {
  display: flex;
  overflow-x: auto;
}
.flex-item {
  flex: 0 0 auto;
  width: 200px;
}

Этот подход позволяет создавать адаптивные горизонтальные галереи или списки, в которых элементы не переносятся на новую строку и прокручиваются по горизонтали.

Horizontal scrollbar CSS

Кастомизация скроллбара — важная часть пользовательского интерфейса. Вот пример настройки горизонтального скроллбара:

::-webkit-scrollbar {
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius: 5px;
}

Этот код изменяет высоту скроллбара и внешний вид его ползунка, улучшая визуальное восприятие.

Горизонтальная прокрутка с кнопками

Для удобства пользователей можно добавить кнопки для управления горизонтальной прокруткой:

<button onclick="scrollLeft()">Left</button>
<div class="scroll-container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>
<button onclick="scrollRight()">Right</button>

<script>
  function scrollLeft() {
    document.querySelector('.scroll-container').scrollBy({ left: -100, behavior: 'smooth' });
  }
  function scrollRight() {
    document.querySelector('.scroll-container').scrollBy({ left: 100, behavior: 'smooth' });
  }
</script>

Этот код добавляет кнопки для прокрутки содержимого вправо и влево с плавной анимацией.

Заключение

Используя данные примеры, вы можете легко реализовать горизонтальную прокрутку в CSS. Знание, как добавить или убрать горизонтальный скролл, а также кастомизировать его внешний вид, помогает создавать более удобные и интерактивные интерфейсы.

Post Views: 31

Frontend Base