¿Cómo crear un indicador de desplazamiento usando HTML CSS y JavaScript?

El indicador de desplazamiento es una barra de progreso que representa cuánto se ha desplazado una página. Cuando nos desplazamos hacia abajo, la barra se llena y cuando nos desplazamos hacia arriba, la cantidad de la barra se reduce.

Enfoque: Ahora, crearemos una página web básica con texto para permitir el desplazamiento y luego usaremos JavaScript para que funcione el indicador de desplazamiento.

Código HTML: En esta sección, crearemos una estructura básica del cuerpo.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>GFG : Scroll Indicator</title>
</head>
  
<body>
    <!--The scroll indicator line 
        at the top of page-->
  
    <div class="line" id="scrollIndicator"></div>
  
    <!--Content to fill the page 
        to enable scrolling-->
    <div class="text">
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
    </div>
</body>
  
</html>

Código CSS: en esta sección, agregaremos algunas propiedades CSS para establecer el estilo para crear un indicador de desplazamiento.

<style>
    body {
        margin: 0;
    }
  
    /* Formatting text to 
    fill the page */
    .text {
        font-size: 80px;
        color: green;
        text-align: center;
        line-height: 3em;
    }
  
    /* The progress bar - 
    scroll indicator */
    .line {
        background: green;
        height: 8px;
        border-radius: 4px;
        width: 0%;
        position: fixed;
        top: 0;
    }
</style>

Acercarse:

window.innerHeight: la altura de la parte visible del navegador.
document.body.scrollHeight: la altura de la página web.
window.scrollY: número de píxeles que el usuario se ha desplazado hacia abajo hasta el momento.
maxHeight: calcula el número de píxeles que el usuario puede desplazarse.
porcentaje: el ancho del elemento scrollIndicator.

Código JavaScript para el indicador de desplazamiento:

<script>
  
    // Added event listener to the scroll
    window.addEventListener('scroll',
            moveScrollIndicator);
  
    // Getting scrollIndicator element by ID
    const scrollIndicatorElt = 
        document.getElementById('scrollIndicator');
  
    // Height of entire web page - height
    // of viewable portion of browser
    const maxHeight = 
        window.document.body.scrollHeight 
        - window.innerHeight;
  
    function moveScrollIndicator(e) {
  
        // Calculating width of the 
        // scrollIndicator element
        const percentage = 
            ((window.scrollY) / maxHeight) * 100;
  
        // Pixels scrolled by the user 
        // to total scrollable Pixels
        scrollIndicatorElt.style.width
                 = percentage + '%';
    }
</script>

Código completo:

<!DOCTYPE html>
<html>
  
<head>
    <title>GFG : Scroll Indicator</title>
    <style>
        body {
            margin: 0;
        }
  
        .text {
            font-size: 80px;
            color: green;
            text-align: center;
            line-height: 3em;
        }
  
        .line {
            background: green;
            height: 8px;
            border-radius: 4px;
            width: 0%;
            position: fixed;
            top: 0;
        }
    </style>
</head>
  
<body>
    <div class="line" id="scrollIndicator"></div>
  
    <div class="text">
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
        <div>GeeksforGeeks</div>
    </div>
  
    <script type="text/javascript">
        window.addEventListener('scroll',
                moveScrollIndicator);
  
        const scrollIndicatorElt =
            document.getElementById('scrollIndicator');
  
        const maxHeight =
            window.document.body.scrollHeight
            - window.innerHeight;
  
        function moveScrollIndicator(e) {
            const percentage = 
                ((window.scrollY) / maxHeight) * 100;
  
            scrollIndicatorElt.style.width
                = percentage + '%';
        }
    </script>
</body>
  
</html>

Producción:
Scroll Indicator Working

Publicación traducida automáticamente

Artículo escrito por tarundhamor y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta