У веб-розробці важливим аспектом є досвід користувача, і одним з важливих моментів є управління прокручуванням. Запобігання небажаним ефектам, таким як прокручування між контейнерами або відскік у браузерах, може значно покращити зручність роботи з додатками, особливо на мобільних пристроях.
Якщо ви створюєте одно-сторінковий додаток (SPA) або використовуєте такі фреймворки, як React з Vite, контроль прокручування стане важливою частиною для покращення взаємодії з користувачем. Для цього можна використовувати прості, але ефективні HTML-атрибути.
Одним з корисних правил є overflow-y: scroll. Це правило CSS забезпечує, що вертикальна смуга прокручування буде завжди видимою, навіть якщо вміст сторінки не потребує прокручування. Це допомагає уникнути зміщення макету при переходах між сторінками або відкритті модальних вікон, а також забезпечує послідовність інтерфейсу.
Інший корисний параметр — це overscroll-behavior-y: none. Він запобігає "ланцюговому прокручуванню" або "відскокам", коли ви прокручуєте до верхньої чи нижньої межі контейнера, а браузер продовжує прокручувати батьківський контейнер або навіть всю сторінку.
Цей підхід особливо ефективний у таких випадках, як:
- Запобігання прокручуванню тіла сторінки, коли модальне вікно чи бічна панель відкрита.
- Запобігання ефекту відскоку на пристроях iOS.
- Покращення прокручування на повноекранних макетах.
Цю техніку варто використовувати при створенні мобільних веб-додатків, прогресивних веб-додатків (PWA), створенні власних прокручуваних компонентів (наприклад, каруселей або модальних вікон) або коли потрібен строгий контроль над поведінкою прокручування.
Ось приклад коду для проекту на Vite + React + TypeScript:
html
Завдяки цьому:
- Смуги прокручування завжди будуть видимими, що запобігає стрибкам макету.
- Немає відскоків або ланцюгового прокручування на сенсорних пристроях.
Щоб ще більше покращити досвід користувача, можна комбінувати це з додатковими класами або методами JavaScript для блокування прокручування, коли модальне вікно відкрите:
css
body.modal-open {
overflow: hidden;
}
js
document.body.classList.add("modal-open");
Використання overflow-y: scroll; та overscroll-behavior-y: none безпосередньо на елементі body — це простий, але потужний спосіб покращити користувацький досвід на різних платформах, особливо в SPA або додатках з складними інтерфейсами, такими як модальні вікна чи прокручувані секції. Ці маленькі деталі роблять ваш додаток плавнішим, більш нативним і професійнішим.
Перекладено з: Preventing Scroll Behavior in Browsers with HTML & CSS