• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать полосу прокрутки страницы на CSS3 (Как на сайте создать индикатор прокрутки для страниц CSS)
Создать полосу прокрутки страницы на CSS3
Kosten
Дата: Пятница, 12.10.2018, 19:18 | Сообщение 1
Администраторы
Сообщений:18249
Награды: 55


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

Но главное, в этой статье мы подробно разберем и реализует эту полосу по установке на интернет сайт.

Для начало узнаем основной принцип работы полосы прокрутки:

Как понимаете, что при прокрутке (скроллинге) сразу появится индикатор, который будет двигаться вправо, а с вашей стороны вниз или вверх.
Изначально нужно знать, если весь материал влезает у посетителя в экран, то здесь индикатор не отображается. Просто если не будет прокрутки по правую сторону, то и эффекта не увидите, здесь должно быть на страницы прописано как можно больше материалу, что на demo странице показано.



Приступаем к установке:

HTML

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

  <header>
   <h1>Индикатор прокрутки</h1>
  </header>  
<main>
   <h2>Заголовок</h2>
   <p>Описание
</p>
</main>
</body>
</html>


CSS

Код
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;
  }
}


Демонстрация
Прикрепления: 4795656.png(11.2 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать полосу прокрутки страницы на CSS3 (Как на сайте создать индикатор прокрутки для страниц CSS)
  • Страница 1 из 1
  • 1
Поиск: