Приховування скролбарів за допомогою CSS: Останній посібник - javascript.org.ua

Скролбарі допомагають користувачам навігувати вміст на вебсторінці. Але іноді вам слід приховати їх для більш чистого чи кастомізованого вигляду. Це корисно, якщо прокручування все ще потрібне, але ви не хочете, щоб скролбар був видимим. Приховані скролбарі можуть зробити ваш дизайн більш сучасним і професійним, особливо з ефектами плавного прокручування.

Фото Desola Lanre-Ologun на Unsplash

Цей посібник покаже вам прості та ефективні способи приховати скролбарі за допомогою CSS, залишаючи прокручування функціональним. Ці методи гарантують, що користувачі все ще можуть безперешкодно отримати доступ до всього вашого вмісту.

Що таке `overflow` у CSS?

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

Ось можливі значення для overflow:

visible: Вміст не обрізається і може виходити за межі контейнера.
hidden: Вміст обрізається, і скролбарів не показується.
scroll: Скролбари завжди видимі, навіть якщо вміст поміщається.
auto: Скролбари з’являються тільки тоді, коли вміст виходить за межі.

1. Повністю приховати скролбар

Найпростіший спосіб приховати скролбар — використати overflow: hidden. Це прибирає як горизонтальні, так і вертикальні скролбари, блокуючи вміст у межах контейнера.

/* Приховує горизонтальний та вертикальний скролбар */  
.container {  
 overflow: hidden;  
}

Щоб приховати скролбар на всій вебсторінці, застосуйте це правило до елемента ``:

/* Приховує скролбар на body */  
body {  
 overflow: hidden;  
}

Будьте обережні, оскільки це повністю вимикає прокручування.

2. Приховати скролбар, але залишити прокручування

Псевдоклас ::-webkit-scrollbar надає детальне управління скролбарами у браузерах на основі WebKit, таких як Chrome, Safari та Edge. Ви можете повністю приховати скролбар, зберігаючи при цьому можливість прокручування.

/* Приховує скролбар, але залишає прокручування */  
.container {  
 overflow: auto; /* Дозволяє прокручування */  
}  

.container::-webkit-scrollbar {  
 display: none; /* Приховує скролбар */  
}

Для сумісності з іншими браузерами, такими як Firefox, поєднуйте метод ::-webkit-scrollbar з додатковими властивостями.

/* Приховує скролбар, але залишає прокручування */  
.container {  
 overflow: auto; /* Дозволяє прокручування */  
 scrollbar-width: none; /* Приховує скролбар для Firefox */  
}  

.container::-webkit-scrollbar {  
 display: none; /* Приховує скролбар для браузерів WebKit */  
}

Разом ці техніки забезпечують приховані скролбари у всіх основних браузерах.

Щоб створити безшовний дизайн без видимих скролбарів на ``, але залишити можливість прокручування для користувачів, використовуйте наступний CSS:

/* Приховує скролбар, але дозволяє прокручування на body */  
body {  
 overflow: auto; /* Дозволяє прокручування */  
 scrollbar-width: none; /* Приховує скролбар у Firefox */  
}  

body::-webkit-scrollbar {  
 display: none; /* Приховує скролбар у браузерах WebKit */  
}

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

Розширені техніки приховування скролбарів

Приховуючи скролбари, важливо зрозуміти вимоги дизайну вашого вебсайту. Приховані скролбари можуть зробити інтерфейс чистішим, але необхідно забезпечити збереження доступності та функціональності. Давайте розглянемо кілька розширених методів для ефективної реалізації цього.

1. Приховати скролбари в одному напрямку

Ви можете приховати скролбари на конкретній осі, використовуючи overflow-x або overflow-y:

/* Приховує горизонтальний скролбар */  
.container {  
 overflow-x: hidden;  
 overflow-y: auto; /* Дозволяє вертикальне прокручування */  
}  

/* Приховує вертикальний скролбар */  
.container {  
 overflow-y: hidden;  
 overflow-x: auto; /* Дозволяє горизонтальне прокручування */  
}

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

2.

Творчі техніки (необов'язково)

Для унікальних дизайнів можна приховати скролбари, використовуючи техніки, як-от clip-path або негативні відступи:

.container {  
 overflow: auto;  
 clip-path: inset(0 0 -20px 0); /* Виштовхує скролбар за межі перегляду */  
}

Негативні відступи або кастомне обрізання визначають візуальну межу, ефективно приховуючи скролбар.

Сумісність з браузерами для прихованих скролбарів

Приховування скролбарів вимагає різних технік у різних браузерах. Ось короткий огляд:

Браузери на основі WebKit (Chrome, Safari, Edge): Використовуйте ::-webkit-scrollbar.
Firefox: Використовуйте scrollbar-width.
Internet Explorer/Legacy Edge: Можливо, знадобляться додаткові CSS або JavaScript хаки.

Порада: Завжди тестуйте на кількох браузерах та пристроях, щоб забезпечити однакову поведінку.

Висновок

Приховування скролбарів може покращити візуальну естетику вашого вебсайту, створюючи чистий і сучасний дизайн. Незалежно від того, чи хочете ви повністю прибрати скролбар, чи зберегти функціональність прокручування, приховуючи їх, CSS надає універсальні варіанти для досягнення ваших цілей. Використовуйте ці техніки обережно, щоб збалансувати дизайн і зручність користування.

Перекладено з: Hide Scrollbar CSS: A Ultimate Guide

Що таке overflow у CSS?