Як прибрати смугу прокручування HTML?
Метод заснований на використанні CSS властивості overflow, яке визначає, як відображатиметься вміст блокової структури, якщо він (вміст) перевищує розміри батьківського елемента. З усіх можливих значень цієї властивості нас цікавить значення «hidden»:
яке задає браузеру інструкцію «відобразити вміст, що помістився, що не влізло — приховати» Застосувавши цю властивість до селектора body або html можна досягти зникнення смуг прокручування. Розглянемо приклад: HTML:
DOCTYPE html>
html>
head>
meta charset="UTF-8">
title> Забираємо скролл title>
head>
body>
div>div>
body>
html>
div height: 2800px;
>
Як бачимо, у нас є незаймана сторінка висотою 2800px зі смугою вертикального скролла. Тепер додамо в каскадну таблицю стилів рядок:
html overflow: hidden;
>
та оновимо сторінку. Також можна застосовувати властивості overflow-y (overflow-x) для управління відображенням контенту, що не вмістився, тільки по вертикалі (горизонталі). Тобто, виходячи з контексту, що розглядається, можна приховати тільки вертикальну (горизонтальну) смугу прокручування.
- CSS не приховує смуги прокручування, а лише створює браузеру умови, за яких немає необхідності їх виводити. Це означає, що разом зі скролл-барами у вас пропаде і скролл-функція, і контент, що «не вміщається», буде недоступний для перегляду!
- Перед використанням даного прийому добре подумайте — чи потрібен вам він взагалі. Адже невеликий недолік можна втратити корисну інформацію з поля зору.
- Найбільш виправданим буде застосування overflow: hidden у таких випадках:
- Виведення маленької сторінки, яка апріорі поміститься повністю на екрані (наприклад, сторінки помилки, сторінки авторизації тощо).
- Виведення невеликих web-форм
- Приховування смуг прокручування під час створення власного каcтомного скролл-бару.
Післямова
Найчастіше до цієї теми web-майстри приходять тоді, коли яскравий авторський дизайн сайту сходить на нуль через «приївся» стандартного виду системного скролл-бару. Так, буває таке. У такому разі існує кілька варіантів вирішення проблеми:
Кастомізувати системні смуги прокручування.
На сьогоднішній день більш-менш гнучке налаштування дозволяють виконувати браузери на базі webkit.
У нашому розпорядженні є досить широкий набір псевдоелементів, які відповідають за структурні частини скролл-барів, та псевдоселекторів, які допомагають кастомізувати зовнішній вигляд структурних частин у різних станах.
- Системний скролл набагато продуктивніший JavaScript-Симулятор, реалізує всі «фішки» операційної системи пристрою, зберігається крос-платформність.
- Немає жодних гарантій, що браузери на інших (не webkit) движках зможуть усвідомити всю «тонкість душевної організації» вашого сайту (кастомізація швидше за все не відбудеться).
Приховати системні смуги прокручування, та використовувати JavaScript-Емулятор.
Здавалося б, цілком логічно: хочеш крос-браузерності — використовуй JavaScript. Але в даному випадку це жорстока помилка.
Справа в тому, що в цьому випадку JavaScript доводиться обробляти системні події, пов'язані зі скролом. А інтерфейс цих подій значно відрізняється для кожного браузера, не кажучи вже про різні платформи.Врахуйте цю інформацію під час використання «готових» j-скролерів (особливо, коли на сторінці джерела заявляють про повну «крос» без підтвердження).
- Продуктивність емулятора нижче продуктивності системного прокручування.
- Немає гарантій крос-браузерності та крос-платформності.
Тема авторського універсального скролла буде детальніше розглянута в окремій статті. Успішних проектів.
Як приховати смугу прокручування (скроллбар) за допомогою CSS
За допомогою нових CSS атрибутів смугу прокручування можна стилізувати та приховувати, не впливаючи на можливість користувача прокручувати сторінку. Ми покажемо, як приховати смугу прокручування у більшості браузерів за допомогою CSS.
Зміст
Вступ
Смуга прокручування — це елемент графічного інтерфейсу, який з'являється в правому (або нижньому) кутку веб-сторінки або веб-програми, щоб користувачі переміщалися по сторінці або елементу вгору та вниз (а також вліво та вправо), не відриваючи рук від клавіатури або трекпада . Однак стандартна смуга прокручування часто виглядає несмачна і недоречна, погіршуючи естетику веб-сторінки або веб-програми.
Властивості CSS для приховання смуг прокручування
- Властивість CSS overflow: hidden використовується для приховання вертикальної та горизонтальної смуги прокручування елемента. Однак ця властивість також впливає на здатність елемента прокручуватися вертикальною та горизонтальною осі.
- Властивість CSS overflow-y: hidden використовується для приховання вертикальної смуги прокручування в елементі. Ця властивість також впливає на здатність елемента прокручуватись по вертикальній осі.
- Властивість CSS overflow-x: hidden використовується для приховання горизонтальної смуги прокручування елемента. Ця властивість також впливає на здатність елемента прокручуватися горизонтальною віссю.
- Смугу прокручування на елементі можна приховати, при цьому зберігши можливість прокручування за допомогою:
- Псевдоселектора ::-webkit-scrollbar , що підтримується лише браузерами webkit.
- Властивості CSS -ms-overflow-style: none підтримуваного лише Edge та іншими застарілими браузерами, такими як IE.
- Властивості CSS scrollbar-width: none , що підтримується Firefox.
Приховати смуги прокручування на конкретних елементах
Продемонструємо, як приховати смуги прокручування за допомогою CSS атрибутів, згаданих вище.
Нижче наведено приклад codepen, що демонструє, як приховати смугу прокручування елемента, не впливаючи на здатність до прокручування.
У прикладі використовується псевдоселектор ::-webkit-scrollbar, щоб приховати смугу прокручування на елементі з класом scroll-container, зберігши функціональність.
.scroll-container::-webkit-scrollbar
display: none;
>
Інший приклад — використання властивості overflow: hidden , що приховує смугу прокручування.
Властивість overflow: hidden застосовується до елемента з класом scroll-container з max-height: 350px.
.scroll-container
background: white;
padding: 2em;
margin: auto;
max-width: 450px;
max-height: 350px;
/* Це приховує смугу прокручування на елементі та впливає на його функцію прокручування */
overflow: hidden;
>
Властивості CSS приховують смуги прокручування браузера
- Псевдоселектор -webkit-scrollbar також можна використовувати для смуг прокручування в браузерах на базі WebKit.
- Смуга прокручування браузера можна приховати, якщо до елемента body (кореневого елемента) додати CSS властивості overflow: hidden, overflow-y: hidden або overflow-x: hidden . Однак не рекомендується застосовувати їх до базового елемента body, оскільки це може перешкодити браузеру прокручувати сторінку.
Приховування смуги прокручування в браузерах Webkit, таких як Chrome, Safari, Edge та Firefox.
Продемонструємо, як приховати смуги прокручування браузера за допомогою CSS властивостей, згаданих вище.
Наведений нижче приклад демонструє, як приховати смугу прокручування браузера, не порушуючи функціональності.
У цьому прикладі використовується псевдоселектор ::-webkit-scrollbar, щоб приховати смугу прокручування на елементі body, зберігши при цьому функціональність.
body::-webkit-scrollbar
display: none;
>
Інший варіант - приховати смугу прокручування за допомогою властивості CSS: overflow: hidden. Однак це впливає на можливість прокручування браузера (що небажано) на цій сторінці, як показано на codepen.
Властивість overflow: hidden застосовується до елемента body.
body
border: 10px solid orange;
margin: auto;
max-width: 600px;
font: 1em / 1.4 sans-serif;
padding: 2em;
display: grid;
place-items: center;
background: white;
/* Це приховує смугу прокручування браузера, проте впливає на функцію прокручування */
overflow: hidden;
>
Висновок
Ми розповіли, як приховати смуги прокручування на рівні елементів та сторінок за допомогою CSS. Смуги прокручування повинні бути приховані з вагомих причин, пов'язаних з інтерфейсом користувача та естетикою, але важливо пам'ятати, що доступність покращується, коли смуги прокручування відображаються в розділах, що прокручуються, оскільки вони полегшують користувачам пошук і навігацію по вмісту.
