Intento hacer un sitio web con diferentes divs o para mí son secciones. Si llegué a la parte superior de uno de estos, debería registrar este término en la consola. Si lo solicita, ScrollHeight es igual al 1% de la altura de la pantalla de los dispositivos.
let Point1 = false; document.addEventListener("scroll", e=> { if (document.documentElement.scrollTop >= 150*ScrollHeight) { if (Point1 == false){ Point1 = true; Point1F(); }; } }) function Point1F() { console.log("U've done it'); }Pero no me funciona.
Su código funciona, ya que creo que el problema por el que no ve su .log() es porque no lo alcanzó.
Si scrollHeight es (como dijiste) "1% de la altura de la pantalla de los dispositivos", entonces necesitas que la altura de html sea ~ 3 veces la altura de tu pantalla;
document.documentElement.style.height = "300vh"; // getting 1% of screen height const scrollHeight = screen.height / 100; const scrollTriggerPoint = scrollHeight * 150; let point1 = false; document.addEventListener("scroll", (e) => { if (document.documentElement.scrollTop >= scrollTriggerPoint) { if (point1 == false){ point1 = true; point1F(); }; } }); function point1F() { console.log("u've done it"); }PD
No use nombres de variables/funciones que comiencen con una letra mayúscula, úselo on;y para funciones o clases de constructor.
API de observador de intersecciones
El uso de la posición de desplazamiento está bien cuando tiene un solo punto de activación. Sin embargo, cuando hay múltiples puntos de activación (como sugiere la pregunta) y no están en una posición consistente en diferentes dispositivos, entonces la API Intersection Observer es una solución útil.
MDN:
La implementación de la detección de intersecciones en el pasado involucraba controladores de eventos y métodos de llamada de bucles como Element.getBoundingClientRect() para generar la información necesaria para cada elemento afectado. Dado que todo este código se ejecuta en el subproceso principal, incluso uno de estos puede causar problemas de rendimiento. Cuando un sitio se carga con estas pruebas, las cosas pueden ponerse francamente feas.
Crea un observador en el documento o un elemento contenedor y luego agrega los elementos que desea observar. Y la devolución de llamada se activa cuando un elemento alcanza la configuración de umbral.
Fragmento de demostración
El fragmento muestra cómo observar diferentes secciones a medida que se desplazan dentro y fuera de la vista.
// create an observer on the document or container element let observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { // code to execute when the section becomes visible console.log("is visible: " + entry.target.id); // uncomment to trigger only once per section // observer.unobserve(entry.target); } }, { root: document, // or container element or null rootMargin: "0px", threshold: 0.1 }); // add each section to the observer document.querySelectorAll("section").forEach(target => { observer.observe(target); }); section { height: 5em; margin: 1em; margin-bottom: 20em; background-color: lightblue; } Scroll down the page to trigger the observer <section id="section1">Section 1</section> <section id="section2">Sectopm 2</section> <section id="section3">Section 3</section> <section id="section4">Section 4</section> <section id="section5">Section 5</section>