• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

124
Views
IntersectionObserver changes the height of observered element

I'm trying to create a lazy loading article list. I've set an Intersecton Observer that checks when the viewport reaches the end of the observed element (the article container) and makes a new api call.

The thing is when I load the new articles in the observed element the height changes but the observation gets triggered only on the initial height.

Should I use a ResizeObserver on top of the IntersectonObserver?

const sections = document.querySelectorAll('.articles_container');

function observeArticlesContainer() {

  const changeNav = (entries, observer) => {

    entries.forEach((entry) => {
      // verify the element is intersecting
      if (entry.isIntersecting) {
        console.log(entry.target)
        // $(results_wrapper).hide()
        // $(loading_animation).fadeIn(200);
        fetchData();
      }
    });
  }
  // init the observer
  const options = {
    root: null,
    rootMargin: '0px 0px -100% 0px',
    threshold: 0
  }

  const observer = new IntersectionObserver(changeNav, options);

  // target the elements to be observed


  sections.forEach(section => {
    observer.observe(section);
  });

} 
almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

ok, I've just set the container below as the target.

const sections = document.querySelectorAll('footer');

also set rootMargin back to 0px

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error