He visto soluciones sobre cómo detectar si un elemento específico está en una ventana gráfica, pero me gustaría saber de todos los elementos qué elementos están actualmente en la ventana gráfica. Podría recorrer todos los elementos DOM y realizar comprobaciones del rect delimitador, pero ¿hay una forma más eficiente de hacerlo?
Lo que estoy tratando de lograr es guardar el progreso de lectura de un usuario en toda la página y guardarlo, luego usar esta información para desplazarse a ese elemento usando scrollIntoView() la próxima vez que el usuario abra la misma página. He intentado un enfoque diferente antes guardando y desplazándome al porcentaje de profundidad, sin embargo, esto no es preciso en el diseño receptivo donde el tamaño de la ventana gráfica debe cambiar
Creo que puede usar la API del observador de intersecciones (para angular, puede usar @ng-web-apis/intersection-observer ). Más información sobre la API del observador de intersecciones
y manejar el evento cuando se bloquee a la vista
<section waIntersectionRoot> <div waIntersectionObserver waIntersectionThreshold="0.5" (waIntersectionObservee)="onIntersection($event)" > I'm being observed </div> <div waIntersectionObserver waIntersectionThreshold="1,0.5,0" (waIntersectionObservee)="onIntersection($event)" > I'm being observed </div> </section>archivo ts
onIntersection(event) { // code here }Estoy de acuerdo en que usar IntersectionObserver sería lo más simple. Aquí lo uso como una directiva y adjunto un observador a los elementos html <div> .
La API de Intersection Observer le permite configurar una devolución de llamada que se llama cuando ocurre alguna de estas circunstancias: Un elemento de destino se cruza con la ventana gráfica del dispositivo o con un elemento específico. Ese elemento especificado se denomina elemento raíz o raíz a los efectos de la API Intersection Observer. La primera vez que se le pide inicialmente al observador que mire un elemento objetivo. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#intersection_observer_concepts_and_usage
private _callback = (entries, observer) => { entries.forEach(entry => { console.log(entry.isIntersecting ? this.elementName + 'I am visible' : this.elementName + 'I am not visible'); this.visibilityChange.emit(entry.isIntersecting ? 'VISIBLE' : 'HIDDEN') }); }; <div enterTheViewportNotifier elementName="TOP ELEMENT" style="height: 100px; background-color: yellow"> I'll notify when I'm visible TOP ELEMENT </div> <div enterTheViewportNotifier elementName="BOTTOM ELEMENT" style="height: 100px; background-color: blue"> I'll notify when I'm visible BOTTOM ELEMENT </div> Sin embargo, con respecto a la parte donde el usuario regresa y continúa leyendo donde lo dejó, sugeriría que un administrador de estado como NGRX se encargue de eso si planea guardar el estado del usuario en más lugares. Si no, y es solo por esta vez, guardaría scrollHeight en un servicio. Y cuando el usuario regresa al componente, simplemente tomamos la última altura de desplazamiento conocida y desplazamos al usuario hasta la última scrollHeight de desplazamiento.
Aquí hay un ejemplo práctico: https://stackblitz.com/edit/angular-ivy-3mkabk?file=src%2Fapp%2Fenter-the-view-port.directive.ts