Скрытие горизонтального скроллбара HTML с помощью JavaScript

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

Для того чтобы свернуть горизонтальную полосу прокрутки, не затрагивая вертикальную, используйте свойства CSS overflow-x: hidden; и overflow-y: scroll;.

.element {
    overflow-x: hidden;
    overflow-y: scroll;
}

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

Осмотрим свойства CSS overflow

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

Декодируем — overflow-x & overflow-y

Overflow-x и overflow-y в CSS функционируют совместно, позволяя контролировать прокрутку по двум осям.

Для облегчения понимания:

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

Подготовка места действия — практическое воплощение

Попробуйте засунуть большой объем текста в ограниченное пространство элемента textarea:

textarea {
    overflow-x: hidden; /* Горизонтальная прокрутка исчезает */
    overflow-y: scroll; /* Вертикальная прокрутка активна */
    width: 100%;
    height: 200px;
    background-color: yellow; /* для наглядности */
}

Результатом будет вертикальная прокрутка содержимого, горизонтальная же полоса прокрутки будет отсутствовать.

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

Преобразуем теоретические знания CSS в понятную иллюстрацию:

💡 Основная цель: Убираем горизонтальную прокрутку и сохраняем вертикальную — это наш игровой вектор.

Визуальный контроль за полосами прокрутки:

Вертикальная прокрутка: ✔️ 
Горизонтальная прокрутка: ❌

В CSS-коде это выражается так:

/* Директива: */
body {
  overflow-y: auto;   /* Вертикальная прокрутка: разрешена */
  overflow-x: hidden; /* Горизонтальная прокрутка: запрещена */
}

Так что имеем:

Вертикальная прокрутка: 👍 
Горизонтальная прокрутка: 👎

У нас нет сомнений, наш путь — вертикальный! 🎏

Контроль overflow от ручки до края ванны (кросс-браузерность)

Адаптивность к браузерам

Свойства overflow-x и overflow-y, поддерживаемые большинством браузеров, обеспечивают схожий пользовательский опыт в разных условиях.

Управление контейнерами с фиксированной высотой внутри ванны

Эта методика идеально подходит и для контейнеров с установленной высотой:

.fixed-height-container {
    height: 300px; /* фиксированная высота */
    overflow-x: hidden;
    overflow-y: auto;  /* вертикальный скролл регулируется автоматически */
}

Атрибут wrap в элементе <textarea>

Для элементов <textarea> можно воспользоваться атрибутом wrap="virtual", но этот способ не является универсально применимым и достаточно устарел.

Дальнейшие раздумья о Прамболе Прокрутки

Пользовательский интерфейс — Пиратский Сундук

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

Трансформация полосы прокрутки

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

Конфликтующие контейнеры

В сложных макетах следует тщательно учитывать взаимное расположение элементов, чтобы избежать нежелательной активации прокрутки.

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

1. Custom Scrollbars in WebKit | CSS-Tricks — Подробная информация о стилизации полос прокруутки с использованием вебкит-специфичных псевдоэлементов.
2. overflow – CSS: Cascading Style Sheets | MDN — Полное руководство по свойству overflow в CSS.
3. How To Hide Scrollbars With CSS — Руководство по скрытию полос прокрутки в CSS.
4. html – Hide scroll bar, but while still being able to scroll – Stack Overflow — Обсуждение методов скрытия полос прокрутки с сохранением функционала.
5. html – CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue – Stack Overflow — Обсуждение проблем при использовании overflow-x и overflow-y.
6. CSS overflow — объяснения и демонстрация работы свойства overflow в CSS.