Determine the id of every element when scrolling to the top in an Angular application

Question

Determine the id of every element when scrolling to the top in an Angular application

I am searching for a way to retrieve the id of the section element when it reaches the top. A similar task has been accomplished using jQuery on Stack Overflow, but I am looking to achieve the same with Angular. I have tried a similar approach but without any success.

/*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>

javascript html css angular typescript

Answer 1

Answer №1

I managed to get it working through my own experimenting. Here is the code snippet that might be useful. Thank you

      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)           
      
        });

.....edited.....

I made some corrections to @Mahdi Zarei's code and saw some progress. Check out a demo on 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];
    });
  }
}

Answer 2

I managed to get it working through my own experimenting. Here is the code snippet that might be useful. Thank you

      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)           
      
        });

.....edited.....

I made some corrections to @Mahdi Zarei's code and saw some progress. Check out a demo on 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];
    });
  }
}

Answer 3

Answer №2

Check out this unique stackblitz that I created.

By storing the offsetTop of sections and setting up a scroll listener on the window, I was able to determine when it reached the specified threshold.

Answer 4

Check out this unique stackblitz that I created.

By storing the offsetTop of sections and setting up a scroll listener on the window, I was able to determine when it reached the specified threshold.

Determine the id of every element when scrolling to the top in an Angular application

Answer №1

Answer №2

Similar questions

Do the jQuery fadeIn() and animation() functions operate in a non-blocking manner?

Creating a responsive body background design

What is the best way to sequentially increment column numbers in Javascript?

Is there a way to display error messages next to the input field in Bootstrap 4?

Expanding the content to fit the text alignment

Node Express combined Frontend and Backend routes under one URL path

Implementing a sleek show/hide transition using slideToggle in jQuery

Tips and tricks for displaying JSON data in Angular 2.4.10

Navigating with Express and Vue

Utilize Bootstrap to align fields in the center

What is the method by which jQuery achieves synchronous behavior in its $.ajax function?

The div is unable to display data retrieved from the php file using Ajax

Exploring how to display JSON objects containing spaces in an HTML table

Having trouble getting Plaid Link to open when using a combination of Javascript and Python

Is there a way to duplicate a GLTF model that has been imported into the Autodesk Viewer?

The parameter 'Barable' cannot be assigned to the parameter 'T' as they are not compatible

Troubleshooting Issue with Post/Get Request in AJAX and Flask Framework

What is the best way to display a child element in the right panel?

Adding custom script tags to a React application

ReactJS error: Unrecognized property <problem>