¿Cómo obtener la posición de la barra de desplazamiento usando JavaScript?

Posted on by Rudeus Greyrat

JavaScript es un lenguaje increíble y hay muchas funciones disponibles a través de las cuales podemos acceder a cualquier elemento de la página HTML a través de javascript. Hay algunas técnicas simples para obtener la posición de la barra de desplazamiento que se analizan a continuación:

Método 1: cada vez que se encuentra la función getScroll() , establece el valor actual de la barra de desplazamiento en el elemento span cuyo id es position . La posición de la barra de desplazamiento a lo largo de un eje horizontal y vertical se indica mediante números enteros. La propiedad pageXOffset devuelve el número de píxeles desplazados a lo largo del eje horizontal (es decir, izquierda y derecha) y la propiedad pageYOffset devuelve el número de píxeles desplazados a lo largo del eje vertical (es decir, arriba y abajo). Las propiedades pageXOffset y pageYOffset son iguales a las propiedades scrollX y scrollY y son propiedades de solo lectura.

  • Programa:

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Scrollbar position using JavaScript/jQuery?
        </title>
        <style>
            .scroll-area {
                height: 1000px;
                background-color: #eee;
                padding: 10%;
            }
              
            button {
                margin-top: 200px;
                margin-bottom: 100px;
                display: block;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green"> 
           GeeksforGeeks 
        </h1>
        <div>
            <p>Current position is:
              <b><span id="position"></span></b>
            </p>
        </div>
        <p>
          Click on the buttons below to get the current
          position of the scrollbar.
        </p>
      
        <p class="scroll-area">
          GeeksforGeeks is a computer science portal. 
          This is a large scrollable area.
      
            <button onclick="getScroll()"> 
              Click to get current scrollbar position
            </button>
            <button onclick="getScroll()"> 
              Click to get current scrollbar position 
            </button>
            <button onclick="getScroll()"> 
              Click to get current scrollbar position 
            </button>
        </p>
        
        <script>
            getScroll =() => {
                var position = document.getElementById('position');
                position.innerHTML = ""
                if (window.pageYOffset != undefined) {
                    position.innerHTML = " X-axis : " 
                    + pageXOffset + " Y-axis : " + pageYOffset;
                } else {
                    var x_axis, y_axis, doc = document,
                        ele = doc.documentElement,
                        b = doc.body;
                    x_axis = ele.scrollLeft || b.scrollLeft || 0;
                    y_axis = ele.scrollTop || b.scrollTop || 0;
                    position.innerHTML = " X-axis : "
                    + x_axis + " Y-axis : " + y_axis;
                }
            }
        </script>
    </body>
      
    </html>
  • Producción:

Método 2: Posición de la barra de desplazamiento usando el detector de eventos. La interfaz de la ventana representa una ventana que contiene un documento DOM y podemos obtener la posición de la barra de desplazamiento agregando un detector de eventos en ella. Esta función se activará automáticamente cada vez que se active el evento de desplazamiento. scrollX y scrollY devuelven los valores flotantes. Cada vez que ocurra el evento de desplazamiento, el detector de eventos se activará automáticamente y actualizará el valor de la posición de la barra de desplazamiento en el elemento cuya identificación es la posición.

  • Programa:

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Scrollbar position using JavaScript/jQuery?
        </title>
        <style>
            .scroll-area {
                height: 1000px;
                background-color: #eee;
                padding: 10%;
            }
              
            #sticky {
                position: sticky;
                top: 0;
                background: #008000;
                color: white;
                padding: 1px;
                text-align: center;
            }
        </style>
    </head>
      
    <body>
        <h1 style="color: green">
          GeeksforGeeks 
        </h1>
      
        <div id="sticky">
            <p>Current position is:
              <b><span id="position"></span></b>
            </p>
        </div>
        <p>
          Click on the buttons below to get the 
          current position of the scrollbar.
        </p>
      
        <p class="scroll-area">
          GeeksforGeeks is a computer science portal.
          This is a large scrollable area.
        </p>
        <script>
            var position = document.getElementById('position');
            position.innerHTML = ""
      
            window.addEventListener("scroll", function(event) {
      
                var scroll_y = this.scrollY;
                var scroll_x = this.scrollX;
                console.log(scroll_x, scroll_y);
                position.innerHTML = " X-axis : " 
                + scroll_x + "Y-axis : " + scroll_y
            });
        </script>
    </body>
      
    </html>
  • Producción:

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *