Отключение вертикальной прокрутки в div с overflow: auto

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

Чтобы скрыть вертикальную полосу прокрутки в элементе div с параметром overflow: auto используйте CSS-правила, специфичные для различных браузеров. В браузерах на основе WebKit, к которым относятся Chrome, Safari и Edge, используйте ::-webkit-scrollbar { display: none; }. Для Firefox применяется параметр scrollbar-width: none;. Данные настройки позволяют убрать видимость полосы прокрутки, но при этом сохранить возможность скроллинга с помощью мыши или сенсорного экрана.

/* Для браузеров на основе WebKit */
.div-no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Для Firefox */
.div-no-scrollbar {
  scrollbar-width: none;
}

Присвойте класс .div-no-scrollbar нужному элементу div, чтобы скрыть полосу прокрутки, не убирая при этом функционал скроллинга.

Установка режима переполнения

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

.div-horizontal-scrollbar {
  overflow-x: auto;
  overflow-y: hidden;
}

Для поддержки старых версий браузера, таких как IE8, используйте -ms-overflow-style: scrollbar;. Если возникнет пустое пространство внизу элемента, добавьте padding-bottom:

.div-horizontal-scrollbar {
  padding-bottom: 17px;
}

Для Firefox и браузеров, основанных на движке Gecko, требуется установка параметра overflow: -moz-scrollbars-vertical;.

Управление скроллингом на уровне одного элемента

Для упрощения кода можно использовать сокращенную запись {overflow: auto hidden;}, включающую горизонтальный скролл и скрывающую вертикальный.

.div-horizontal-scrollbar {
  overflow: auto hidden;
}

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

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

Рассматривайте элемент div с overflow: auto как огород с системой автоматического полива:

| Растения (div)          | Полив (полоса прокрутки) |
| ----------------------- | ------------------------ |
| Overflow: auto 🌿💧     | По необходимости 💦      |

Мы отключаем вертикальный полив:

Отключение вертикального полива: 💧🔽✖️

Когда контента много (огород цветет):

| Состояние растений 🌿  | Полив 💦                |
| ---------------------- | ----------------------- |
| Ясный день ☀️          | Отключен 🛑             |

Когда пространства не хватает (переполнение горизонтальное):

| Состояние растений 🌿  | Полив 💦                |
| ---------------------- | ----------------------- |
| Необходим полив 🏜️    | Только горизонтальный ↔️|

Цель — позволить огороду развиваться без излишнего полива (скрыть полосу прокрутки).

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

Для улучшения пользовательского опыта используйте медиа-запросы и настройте поведение скроллирования в зависимости от устройства и ориентации экрана.

@media screen and (max-width: 768px) {
  .div-horizontal-scrollbar {
    overflow-x: scroll;
  }
}

Если div задан фиксированный размер, контролируйте параметры переполнения, чтобы прокрутка была удобна.

.div-fixed-size {
  width: 300px;
  height: 150px;
  overflow-x: auto;
  overflow-y: hidden;
}

Принимайте во внимание особенности пользовательских интерфейсов и их влияние на восприятие пользователями, особенно в вопросах доступности.

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

1. Свойство CSS Overflow | CSS-Tricks — детальные руководства по работе с свойством overflow в CSS.
2. overflow – CSS: Каскадные таблицы стилей | MDN — документация MDN по свойству overflow.
3. Как скрыть полосы прокрутки с помощью CSS — руководство от W3Schools, рассказывающее о том, как скрыть полосы прокрутки.
4. CSS Overflow Module Level 3 — рабочий проект W3C о спецификациях CSS overflow.
5. html – Скрыть полосу прокрутки, но при этом сохранить возможность прокрутки – Stack Overflow — пользовательские решения проблемы сохранения функциональности прокрутки при скрытой полосе прокрутки.
6. Просто мгновение... — живой пример на CodePen, демонстрирующий метод скрытия полосы прокрутки.
7. Keen – Многофункциональный шаблон Bootstrap 5 HTML – Keen by KeenThemes — реальный пример реализации предотвращения прокрутки страницы при открытом модальном окне.