аватар |

Статьи / CSS /

Как создать индикатор (полосу) прокрутки страницы на CSS3?


Уверен, что многие во время чтения в интернете или прохождения анкеты хоть раз видели полосы прокрутки, которая отображается сколько посетитель уже прокрутил до конца страницы (или конкретного блока с содержимым). Это эффективно с точки зрения определения времязатрат на чтение/просмотр. В данной статье мы это реализуем на CSS3.

Принципы работы полосы прокрутки:
При прокрутке (скроллинге) индикатор будет двигаться вправо.
Если весь материал влезает у посетителя в экран, то индикатор не отображается.

Код состоит из двух частей: html и css. Сам документ будет содержать следующее:

Код HTML


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Индикатор прокрутки</title>
    
</head>
<body>

  <header>
   <h1>Индикатор прокрутки</h1>
  </header>
  
  <main>
   <h2>Lorem Ipsum (шаблонный текст)</h2>

   <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sollicitudin massa quis magna porta lobortis. Morbi congue porttitor tortor vel consectetur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla eu velit id nulla ultrices ornare. Mauris at augue eget libero gravida condimentum at non neque. Proin ac luctus velit, id blandit augue. In hac habitasse platea dictumst. Donec felis sapien, tristique sit amet velit in, ultrices mattis purus. Cras non tellus posuere, sodales massa sed, dignissim eros.
</p>
<p>
Cras convallis ligula sem, nec consectetur eros venenatis ut. Curabitur sodales pharetra blandit. Mauris placerat urna turpis. Pellentesque eget tincidunt ipsum. Fusce vel tellus blandit dolor eleifend lacinia. Nam ac suscipit sem. Fusce in ullamcorper ante, at lobortis nunc. Sed rutrum ante sit amet molestie ornare. Fusce quis nunc laoreet, mollis massa sit amet, viverra nunc. Sed vitae sollicitudin ipsum, quis sodales erat. Cras sollicitudin luctus ipsum, vel feugiat massa. Nam ut finibus ante. Pellentesque egestas fringilla ornare. Sed congue pharetra dolor vel finibus. Nam a augue ac lorem facilisis lacinia sit amet non augue.
</p>

  </main>
  
</body>
</html>

Сам индикатор или полоса прокрутки находится в header, там же расположен заголовок страницы. Следом идёт main с самим контентом (в данном случае длинным текстом). В нём располагаем несколько параграфов. Конечно же, в качестве контента могут выступать изображения (галерея) и прочее.

Конечно же, количество текста Lorem Ipsum (шаблонный текст) я в данном фрагменте существенно сократил. В демонстрации он будет значительно больше, чтобы у тех, кто имеет большое разрешение полоса прокрутки отобразилась. Соответственно, если текст умещается весь, то полоса прокрутки не отображается.

Код CSS3

html,body{margin:0;}
header{
  position: fixed;
  top:0;
  height: 85px;
  width: 100%;
  background: white;
}

main{
  margin-top: 88px;
}

@supports (height: 100vh) { 
  body{ 
   background: linear-gradient(to right top, #0089f2 50%, #DDD 50%);
   background-size: 100% calc(100% - 100vh + 109px);
   background-repeat: no-repeat;
  }

  body:before{
   content:'';
   position: fixed;
   top: 88px;
   bottom: 0;
   width: 100%;
   z-index: -1;
   background: white;
  }
}

Как и в большинстве примеров, сразу убираем лишние отступы у тегов html и body, дальше фиксируем header. Для header (где заголовок) задаём высоту и ширину, а также цвет заднего фона. У тега main мы делаем отступ сверху, чтобы содержимое страницы не уходило под блок, когда страница находится вверху.

А уже с помощью CSS3 производим расчёт, насколько процентов была прокручена страница, и рисуем градиент в виде полосочки.

И конечно же демонстрация и исходники полосы прокрутки:

Демонстрация Скачать исходники


Спасибо за внимание!
 



Распечатать
Похожие статьи
03 октября 2014 10:40 Как вызвать кроссбраузерную анимацию загрузки на CSS 3?
06 декабря 2013 15:06 Как сделать обтекание изображения (картинки) текстом средствами CSS?
17 июля 2015 12:15 Как создать красивую всплывающую подсказку на сайте с помощью CSS?
16 октября 2014 12:40 Как закрепить футер или подвал внизу web-страницы CSS?
28 ноября 2014 12:57 Плавное увеличение изображения при наведении CSS


Комментарии к статье (vk.com)