javascript - Mostrar la posición de desplazamiento en la consola

Estoy tratando de mostrar la posición del desplazamiento, pero mi solución no parece funcionar como se espera. ¿Qué estoy haciendo mal?

$(document).ready(function() {
    var tempScrollTop = $(window).scrollTop();
    function example() {
        console.log("Scroll from Top: " + tempScrollTop.toString());
    };
});

<body>      
    <p>some text</p>
    <!-- there are many <p> elements -->
    <p>some text</p>        
</body>

Cada vez que desplazo hacia arriba o hacia abajo, el script no se muestra en la consola.

Respuesta #1

Primero, nunca llamas a la función example(), por lo que nunca se ejecutará. Necesitas llamar a la función example() bajo el evento scroll del elemento requerido. En segundo lugar, necesitas actualizar el valor de la variable tempScrollTop dentro de la función. Intenta esto:

$(window).scroll(example);

function example() {
  var tempScrollTop = $(window).scrollTop();
  console.log("Scroll from Top: " + tempScrollTop.toString());
};

html, body {
  height: 2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Respuesta #2

Puedes verificar tu valor de scrollTop desplazándote dentro del elemento div para mostrar el número de píxeles que el contenido del div se ha desplazado hacia arriba

function myFunction() {
    var elmnt = document.getElementById("myDIV");
    var y = elmnt.scrollTop;
    document.getElementById ("demo").innerHTML = "Scrolled Top: " + y + "px";
}

#myDIV {
    height: 100px;
    width: 250px;
    overflow: auto;
}

#content {
    height: 800px;
    width: 200px;
    background-color: coral;
}

<p>Scroll inside the div element to display the number of pixels the content of div is scrolled top</p>

<div id="myDIV" onscroll="myFunction()">
  <div id="content">Scroll inside me!</div>
</div>

<p id="demo"></p>