Saber la posicion de un elemento respecto al scroll

Question

Como puedo saber cuando se escrollea la posicion de un elemento respecto a la posicion del scroll? Esto es lo que he intentado hasta ahora:

const elements = [];
 for(i = 0; i <= 8; i++) {
     elements.push(document.getElementById(`p${i}`));
 }
 window.onscroll = () => {
     console.log("scroll event emmited");
     for(i = 0; i <= 8; i++) {
        console.log(elements[i].id + " " + elements[i].scrollTop);
     }
 }

<p id="p0">
    Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <p id="p1">
    Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <p id="p2">
    Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por
</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <p id="p3">
    las desgracias que a mí me suceden, pues a ti no te cabe parte dellas.Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <p id="p4">
    Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por las desgracias que a mí me suceden, pues a ti no
</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <p id="p5">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <p id="p6">
    Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <p id="p7">
    porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <p id="p8">
    condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. , leo eget bibendum sodales, augue velit cursus nunc,
</p>

Answer 1

He editado un poco el código original de esta respuesta en SOen:

Version JavaScript:

var prev_id;

document.getElementById('main').onscroll = function(){
    
    var element_height = 200;

    var section = document.getElementById('section');

    // Representa el tamaño de un elemento y su posición relativa a la ventana gráfica
    var screenPosition = section.getBoundingClientRect();  

    // Recogemos el valor top y lo convertimos en números positivos
    var positive =  Math.abs(screenPosition.top);

    var divided = positive / element_height;
    var round = Math.round(divided);

    // Cogemos el id del elemento cual es visible actualmente
    var current_element_id = section.children[round].id;

    if (current_element_id != prev_id) {
 
      prev_id = current_element_id;
      
      console.log(current_element_id);
    }
};

main {
    border: 1px solid black;
    width: 400px;
    height: 200px;   
    background-color:#cdcdcd;
    overflow: auto;
}

section {
    width: 400px;
    height: 200px;
}

p {
    width: 400px;
    height: 200px;
}

<main id="main">
    <section id="section">
        <p id="p0">
             Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: 
            Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
        </p> 
        <p id="p1">
            Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: 
            Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
        </p> 
        <p id="p2">
            Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y 
            han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, 
            y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por
        </p>
        <p id="p3">
            las desgracias que a mí me suceden, pues a ti no te cabe parte dellas.
            Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: 
            Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
        </p>
        <p id="p4">
            Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y
            han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables,
            y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no 
            debes congojarte por las desgracias que a mí me suceden, pues a ti no
        </p>
        <p id="p5">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
            Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </p>
        <p id="p6">
            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, 
            imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        </p>
        <p id="p7">
            porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
            feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
        </p>
        <p id="p8">
            condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
            blandit vel, luctus pulvinar, hendrerit id, lorem. , leo eget bibendum sodales, augue velit cursus nunc,
        </p>
    </section>
</main>

Version jQuery:

var prev_id;

$('main').scroll(function(){
    
    var element_height = 200;
    var offset = $('section').offset(); // Obtener las coordenadas actuales
    // Recogemos el valor top y lo convertimos en números positivos
    var positive =  Math.abs(offset.top);
    // Divide la distancia con la altura del elemento
    var divided = positive / element_height; 
    var round = Math.round(divided);

    var current_element = $('section').children().eq(round);
    
    // Elige el elemento cual es visible actualmente
    var id = current_element.attr('id');

    // Muestra el id si no coincide con el id anterior
    if (id != prev_id) {
 
      prev_id = id;
      
      console.log(id);
    }
});

main {
    border: 1px solid black;
    width: 400px;
    height: 200px;   
    background-color:#cdcdcd;
    overflow: auto;
}

section {
    width: 400px;
    height: 200px;
}

p {
    width: 400px;
    height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
    <section>
        <p id="p0">
             Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: 
            Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
        </p> 
        <p id="p1">
            Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: 
            Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
        </p> 
        <p id="p2">
            Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y 
            han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables, 
            y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no debes congojarte por
        </p>
        <p id="p3">
            las desgracias que a mí me suceden, pues a ti no te cabe parte dellas.
            Y, viéndole don Quijote de aquella manera, con muestras de tanta tristeza, le dijo: 
            Sábete, Sancho, que no es un hombre más que otro si no hace más que otro.
        </p>
        <p id="p4">
            Todas estas borrascas que nos suceden son señales de que presto ha de serenar el tiempo y
            han de sucedernos bien las cosas; porque no es posible que el mal ni el bien sean durables,
            y de aquí se sigue que, habiendo durado mucho el mal, el bien está ya cerca. Así que, no 
            debes congojarte por las desgracias que a mí me suceden, pues a ti no
        </p>
        <p id="p5">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
            Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </p>
        <p id="p6">
            Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, 
            imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
        </p>
        <p id="p7">
            porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
            feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet.
        </p>
        <p id="p8">
            condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc,
            blandit vel, luctus pulvinar, hendrerit id, lorem. , leo eget bibendum sodales, augue velit cursus nunc,
        </p>
    </section>
</main>