Убираем горизонтальный скролл в div с CSS: приемы

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

.overflow-hidden {
  overflow-x: hidden;
}

Для того чтобы устранить горизонтальный скроллбар в div, используйте в CSS свойство overflow-x со значением hidden. Этот подход скроет любой контент, выходящий за границы блока по горизонтальной оси, не позволив ему прокручиваться.

Пример применения:

<style>
  .overflow-hidden {
    overflow-x: hidden; // Горизонтального скроллбара больше нет
  }
</style>
<div class="overflow-hidden">
  <!-- Здесь размещается ваш важный контент -->
</div>

Разбираемся с свойством Overflow

Что такое Overflow? overflow-x и overflow-y — это своего рода сторожи контента. При установке overflow-x: hidden; горизонтальный скроллбар исчезает, но вертикальный может остаться. Чтобы вертикальный скроллбар появлялся только при необходимости, рекомендуется использовать overflow-y: auto;:

.scrollable-div {
  overflow-x: hidden; // Горизонтального переполнения больше нет
  overflow-y: auto; // Вертикальный скроллбар активируется при необходимости
}

Если вы планируете полностью устранить скроллбары в браузерах на основе WebKit, таких как Chrome и Safari, попробуйте применить следующее:

.no-scroll::-webkit-scrollbar {
  display: none; // Скроллбары становятся невидимыми
}

Однако, это решение может не сработать в Firefox и других браузерах, не использующих ядро WebKit. Возможно, потребуется подбирать другие методы и применять JavaScript.

Гибкость и адаптивность

Адаптация под переполнение контента

Когда контент выходит за пределы div, и возникает нежелательный горизонтальный скроллбар, можно применить адаптивные методики. Например, медиа-запросы или Flexbox, обеспечивающие корректное отображение вашего контента:

@media screen and (max-width: 600px) {
  .responsive-content {
    flex-direction: column;
  }
}

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

Учёт невидимого контента

Учитывайте, что overflow-x: hidden; может привести к тому, что часть контента станет невидимой. Убедитесь, что вся важная информация остаётся доступной для пользователей.

Навигация при помощи клавиатуры

Следите за тем, чтобы ваш сайт легко воспринимался при навигации с клавиатурой. Избегайте преград доступности, связанных со скрытием скроллов. Обеспечьте альтернативные механизмы навигации, которые позволят пользователям легко перемещаться по контенту, даже если есть скрытое переполнение.

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

Можно представить div со скроллом как фотографию длинного поезда, который не умещается в квадратный кадр Instagram:

Фото со скроллом: 📸==🚄...==🚄==

Применение overflow-x: hidden; аналогично обрезке фотографии до нужных размеров:

Идеально обрезанное: 📸🚄

Расшифровываем Overflow

Будьте готовы к неожиданностям с Box Model

Box model имеет влияние на отображение элементов. Чтобы предотвратить горизонтальное переполнение из-за проблем с отступами или границами, используйте box-sizing: border-box;, который учитывает размеры границ и отступов:

div {
  box-sizing: border-box; // Корректное отображение блоков
}

Бережное использование скриптов

Обращайте внимание на динамический контент, который может быть добавлен при помощи JavaScript и вызвать переполнение. Произведите проверку ширины в скриптах для предотвращения проблем.

Остерегайтесь глобальных изменений

Не применяйте overflow-x: hidden; глобально для элементов html и body, так как это может породить проблемы на сложных страницах. Более безопасно и эффективно вносить точечные изменения.

Доступность — присущая характеристика

Экранные читалки и видимость

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

div[aria-hidden="true"] {
  display: none; // Элементы скрыты от средств чтения с экрана
}

Проявляйте гибкость

Используйте "резиновые" (резиновые) макеты для предотвращения появления горизонтального скроллбара:

div {
  width: 100%; // Вместо длины используем проценты
  max-width: 100%; // Контролируем максимальные значения ширины
}

Используйте свойства Display

Выбирая display: inline-block; или display: flex;, вы обеспечиваете естественную раскладку содержимого, уменьшая шансы на появление нежелательных скроллбаров.

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

1. Свойство CSS Overflow | CSS-Tricks
2. Основы CSS box model – CSS: Cascading Style Sheets | MDN
3. Скрытие скроллбаров при помощи CSS
4. Блочные контексты форматирования в CSS — SitePoint
5. Понимание блочного форматирования и макетов CSS — Smashing Magazine