Принципи роботи смуги прокрутки:
При прокручуванні (скроллинге) індикатор буде рухатися вправо.
Якщо весь матеріал влазить у відвідувача в екран, то індикатор не відображається.
Код складається з двох частин: html і css. Сам документ буде містити наступне:
Сам індикатор або смуга прокрутки знаходиться в header, там же розташований заголовок сторінки. Слідом йде main з самим контентом (в даному випадку довгим текстом). У ньому маємо кілька параграфів. Звичайно ж, як контенту можуть виступати зображення (галерея) та інше.
Звичайно ж, кількість тексту Lorem Ipsum (шаблонний текст) я в даному фрагменті істотно скоротив. У демонстрації він буде значно більше, щоб у тих, хто має великий дозвіл смуга прокрутки відобразилася. Відповідно, якщо текст вміщується весь, то смуга прокрутки не відображається.
Як і в більшості прикладів, відразу прибираємо зайві відступи у тегів html і body, далі фіксуємо header. Для header (де заголовок) задаємо висоту і ширину, а також колір заднього фону. У тега main ми робимо відступ зверху, щоб вміст сторінки не йшло під блок, коли сторінка знаходиться вгорі.
А вже за допомогою CSS3 виробляємо розрахунок, наскільки відсотків була прокручена сторінка, і малюємо градієнт у вигляді смужки.
І звичайно ж демонстрація та вихідні смуги прокрутки:
Дякую за увагу!