Як сховати скроллбар за допомогою CSS

Існує декілька способів приховати скроллбар (смугу прокрутки) за допомогою CSS, залежно від того, чи хочете ви повністю видалити прокручування чи просто приховати візуальний вигляд смуги прокрутки.

Приховати скроллбар, але продовжуйте прокручувати

Щоб візуально приховати смугу прокручування, але зберегти функціональність прокрутки:

/* For modern browsers */
.block {
  overflow: auto; /* or scroll */
  scrollbar-width: none; /* Firefox */
}

.block::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

Повністю вимкнути прокручування

Якщо ви хочете повністю вимкнути прокручування (і сховати скроллбар):

.block {
  overflow: hidden;
}

Цей метод блокує як вертикальне, так і горизонтальне прокручування.

Приховати лише горизонтальні або вертикальні скроллбари

Тільки по горизонталі:

.block {
  overflow-x: hidden;
}

Тільки по вертикалі:

.block {
  overflow-y: hidden;
}

Для всієї сторінки

Приховати смугу прокрутки по всьому документу:

html, body {
  overflow: hidden;
}

Якщо ви хочете, щоб вміст залишався прокручуваним, але лише приховати скроллбар, скористайтеся першим методом.