Quiero obtener la identificación del elemento de la sección cuando llegue a la parte superior. Ya se ha hecho algo similar con jquery pero quiero lo mismo con Angular. Lo intenté de manera similar pero sin éxito.
/*let content = document.getElementsByClassName('scrollable'); this.listener = this.renderer2.listen('window', 'scroll', (e) => { let elementPos = el.getBoundingClientRect().top + window.pageYOffset; var el = Array.prototype.forEach.call(content, (el)=>{ // console.log(el.id, el.getBoundingClientRect().bottom, parseInt(el.clientHeight)) if(el.getBoundingClientRect().bottom >= parseInt(el.clientHeight)) { console.log({el}) } }) */ section {background: #ccc; height: 100vh;}; section:nth-child(odd) {background: red} <section class="scrollable" id="scroll1"> Scroll1 </section> <section class="scrollable" id="scroll2"> Scroll2 </section> <section class="scrollable" id="scroll3"> Scroll3 </section> <section class="scrollable" id="scroll4"> Scroll4 </section> <section class="scrollable" id="scroll5"> Scroll5 </section>Hice este stackblitz .
offsetTop de secciones y agregué un oyente para desplazarse por la ventana y verifiqué si alcanzó el umbral.
Soy capaz de hacer que funcione por mi cuenta con un poco de experimentación. El siguiente código podría ayudar. Gracias
let content = document.getElementsByClassName('scrollable'); // let windowTop = window.scroll.offset() this.listener = this.renderer2.listen('window', 'scroll', (e) => { let scrollY = this.windowRef.nativeWindow.pageYOffset; let landingPage = Array.prototype.filter.call(content, (el)=>{ // console.log(el.id, scrollY, el.getBoundingClientRect().top) return scrollY > (el.getBoundingClientRect().top + window.pageYOffset - 80); }) // console.log({landingPage}) console.log(landingPage.at(-1).id) });..... editado .....
Intenté corregir el código de @Mahdi Zarei y obtuve algún resultado. demostración de stackblitz
import { AfterViewInit, Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent implements AfterViewInit { constructor() {} ngAfterViewInit() { // @ts-ignore const sections : any = Array.from( document.getElementsByClassName('scrollable') as HTMLCollectionOf<HTMLElement> ).map((section) => [section.id, section.offsetTop]); window.addEventListener('scroll', function (ev) { let foundIndex = 0; sections.forEach((sec, index) => { if (document.scrollingElement.scrollTop >= sec[1]) { foundIndex = index; } }); document.getElementById('el').innerText = sections[foundIndex][0]; }); } }