Как создать индикатор прокрутки с помощью HTML CSS и JavaScript

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

Пример индикатора прокрутки.

Прокрути страницу в браузере (вариант 1) / прокрути этот блок (вариант 2).

Единство стиля в дизайне подразумевает узнаваемость, а не скучный шаблонный вид для всех разделов, рубрик, страниц сайта. Узнаваемость выражается в стиле, деталях оформления и необходима для продвижения бренда, а набор отличных по дизайну страниц нельзя назвать стильным дизайном

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

15

end

Индикатор прокрутки в окне браузера HTML CSS и JavaScript

HTML

   <div id="myBarP"></div>     

CSS

 <style> 
#myBarP{position:fixed; top:0; left:0; height:.2rem; background:linear-gradient(to right,rgba(191,95,103,0.81), rgba(69,143,146,0.6), rgba(191,95,103,0.81)); width:0; max-width:100%; min-width:0;z-index:100; transition:width .2s ease-out}   
 </style> 

JavaScript

<script>
     window.onscroll = function () {     
        myFunction();  
     };   
     function myFunction() {   
       var winScroll =   
         document.body.scrollTop || document.documentElement.scrollTop;   
       var height =   
         document.documentElement.scrollHeight -   
         document.documentElement.clientHeight;   
       var scrolled = (winScroll / height) * 100;   
        document.getElementById("myBarP").style.width = scrolled + "%";    
     }   
</script>

codepen ➥

Индикатор прокрутки в отдельном на странице блоке <div></div> HTML CSS и JavaScript

HTML

Размещаем в выброном блоке для индикации

   <div id="myBarPScrollIndicator"></div>     
 

CSS

 
<style>   
#myBarPScrollIndicator {position:sticky; position:-webkit-sticky; top:0; height:.6rem; background:linear-gradient (to right,rgba(191,95,103,0.81),rgba(69,143,146,0.6),rgba(191,95,103,0.81));width:0; max-width:100%; min-width:0; z-index:100; transition:width .2s ease-out}  
   </style>    
  

JavaScript

#sectionScrollIndicator - id блока в котором будет индикатор / полоса прокрутки.

   <script>      
   document.getElementById("sectionScrollIndicator").onscroll = function () {     
       myFunction22();     
      };    
     function myFunction22() {     
       const winScroll = document.getElementById("sectionScrollIndicator")     
         .scrollTop;     
       const height =     
         document.getElementById("sectionScrollIndicator").scrollHeight -     
         document.getElementById("sectionScrollIndicator").clientHeight;     
       const scrolled = (winScroll / height) * 100;     
       document.getElementById("myBarPScrollIndicator").style.width =     
         scrolled + "%";     
     }     
  </script>      
 

codepen ➥