Наверняка уверен, что вы в сети интернет на сайтах встречали горизонтальную прокрутку, которая появлялась, как только вы начали опускать или поднимать страницу, и все это выглядело оригинально. Также возможно некоторые встречали точно такую функцию. которая была задействованная в различных блоках. Так как она удобно, где по ней как индикатор можно видеть, где начинается. это вверх. но главное где будет заканчиваться.
Но главное, в этой статье мы подробно разберем и реализует эту полосу по установке на интернет сайт.
Для начало узнаем основной принцип работы полосы прокрутки:
Как понимаете, что при прокрутке (скроллинге) сразу появится индикатор, который будет двигаться вправо, а с вашей стороны вниз или вверх.
Изначально нужно знать, если весь материал влезает у посетителя в экран, то здесь индикатор не отображается. Просто если не будет прокрутки по правую сторону, то и эффекта не увидите, здесь должно быть на страницы прописано как можно больше материалу, что на 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;
}
}
Демонстрация
