Настройка горизонтальной прокрутки для div в CSS

Быстрый ответ

Если хотите активировать только горизонтальную прокрутку через CSS, задайте свойству overflow-x: auto; и установите overflow-y: hidden;, чтобы скрыть вертикальную прокрутку. Добавьте эти свойства в нужный вам div:

.div-horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  /* Здесь начинается магия CSS 🦄 */
}

После чего используйте получившийся класс для вашего div в коде HTML:

<div class="div-horizontal-scroll">
  <!-- Например, длинный текст или широкие изображения 🐉 -->
</div>

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

Использование свойства white-space

Свойство white-space относится к управлению размещением элементов и может существенно облегчить процесс прокрутки. Если применить его как white-space: nowrap;, все содержимое будет помещено в одну строку:

.div-horizontal-scroll {
  white-space: nowrap;
  /* То бишь, все в одну строку 🎭 */
}

Совместимость браузеров

В ходе работы над разрабатываемым проектом в области фронтенда, тема совместимости браузеров может стать подводным камнем, особенно если речь идёт о работе с полосами прокрутки:

• Internet Explorer — несмотря на то, что он уже устарел, его специфическое поведение полос прокрутки иногда может создать проблемы. Для решения вопроса прокрутки в IE8 установите свойство -ms-overflow-style:

.div-horizontal-scroll {
  -ms-overflow-style: none; /* немного магии для старого доброго IE8 🎶 */
  /* другие стили */
}

Выборки для старых браузеров

Внимание стоит обратить на то, что старые версии Internet Explorer (IE 6-7) могут игнорировать некоторые новые свойства CSS3, включая те, что связаны с прокруткой. Следите за обновлениями от Microsoft, чтобы увеличить совместимость встроенных функций браузера с актуальными стандартами.

Профилактические стратегии и обновления

Согласно знаменитой поговорке, "предупрежден — значит вооружен". Это относится и к веб-разработке. Учитывайте обновления браузеров, которые могут содержать исправления для работы с полосами прокрутки, используйте прогрессивные методики разработки дизайна и стремитесь минимизировать потребность в использовании полос прокрутки.

Визуализация

Представьте себе железнодорожные пути (🛤️), откуда поезда — это ваш контент:

Верхний вид (👀):
 ________________
|🚂🚃🚃🚃🚃🚃🚃🚃🚃|
|________________|
⬆️ Видим только горизонтальную линию (Скролл →)

Чтобы отобразить только горизонтальные полосы прокрутки, поместите контент внутрь рамки области просмотра:

.viewport {
  overflow-x: auto;    /* Прокрутка по горизонтали влево-вправо */
  overflow-y: hidden;  /* Отключаем вертикальную прокрутку */
  width: 100%;         /* Адаптивный подбор размеров под пожелания пользователя */
}

Улучшение пользовательского опыта с помощью стилизации

Стилизация полосы прокрутки

С помощью CSS у вас есть возможность улучшить пользовательский опыт путем стилизации полос прокрутки:

::-webkit-scrollbar {
  height: 10px; /* Делаем горизонтальную полосу прокрутки лучше */
}

::-webkit-scrollbar-thumb {
  background: gray; /* Придаем ей серость цвета мокруга */
}

Данные правила рассчитаны на браузеры с движком WebKit, например, Chrome и Safari, с тем, чтобы прокрутка страницы стала более комфортной для восприятия глазами.

Подробнее об этом расскажет наш спикер на видео

Flexbox: инструмент для работы с макетом

Flexbox — это превосходный инструмент для работы с горизонтальной разметкой контента. Он существенно облегчает работу с переполнением благодаря свойству display: flex;, помогая элементам оставаться в границах одной строки и успешно прокручиваться как благородному рыцарю:

.flex-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  /* Управляем прокруткой как профессионал 😎 */
}

С Flexbox вам не придется применять свои предыдущие наработки по модели white-space, поскольку содержимое будет корректно адаптироваться и отзываться на действия пользователя.

Пользовательские обработчики событий прокрутки

Представьте своим посетителям кастомные интерактивные визуальные эффекты с помощью слушателей событий JavaScript:

document.querySelector('.div-horizontal-scroll').addEventListener('scroll', () => {
  // Здесь придется работать над дополнительной функциональностью
  // Пользовательская логика действия здесь
});

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

Полезные материалы

1. The CSS Overflow Property | CSS-Tricks — Изучите, что такое свойство overflow в CSS и как им можно управлять.
2. overflow-x – CSS: Cascading Style Sheets | MDN — Прочтите официальную документацию MDN относительно работы по оси X.
3. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issues – Stack Overflow — Узнайте, как решаются проблемы с горизонтальной прокруткой в обсуждениях на Stack Overflow.
4. How To Create a Horizontal Scrolling Menu — Создайте горизонтальное меню с полосой прокрутки по шаговой инструкции от экспертов.
5. A Complete Guide to Flexbox | CSS-Tricks — Посетите гид по миру Flexbox и узнайте, как его можно использовать для оптимизации работы с прокруткой.
6. How to Style Scrollbars with CSS | DigitalOcean — Изучите, как стилизовать полосы прокрутки с CSS.