1

I'm working with infinite scroll, dynamically bind the data to the particular div. At the end of the div trigger the event and append data to the div. Initially trigger event at the end of the div but even after appending data the event trigger at the first instance. How to Trigger event in the current instance of the div

<script>
  var div = document.getElementById("myDiv");
  var top = div.getBoundingClientRect().top;
  var bottom = div.getBoundingClientRect().bottom;

  if (top <= window.innerHeight && bottom >= 0) {
     console.log("Reach Div End");
  }
</script>

Note: Page contain Header and footer. And working div is in between to the header and Footer div

Issue scenario: Header+main content+footer, dynamically append data to the main content div. important is main content div was not overflow scroll and i want to trigger the event when window scroll reach to the end of the maincontent div. From above example the top and bottom variable retain the height of very first instance but its not refresh after the content bind to the main content, so its trigger event every time in first instance

Spurgeon Ebenezer
  • 51
  • 5
  • 2
    Does this answer your question? [javascript: detect scroll end](https://stackoverflow.com/questions/3962558/javascript-detect-scroll-end) – Heretic Monkey Jun 11 '20 at 15:08
  • Thank You @Heretic Monkey for your reply but i'm not mean that the overflow of the div scroll, i mean, that the scroll to the end of the div in window property – Spurgeon Ebenezer Jun 11 '20 at 15:17
  • There are 10 answers on that question. Please try them all. – Heretic Monkey Jun 11 '20 at 15:19
  • I seen the solution, most of the solution depend on end of the document, end of scroll, but i need to know the end of the div was placed in between the header and footer. And the height of the div expand on every scroll – Spurgeon Ebenezer Jun 11 '20 at 15:41
  • The "end of scroll" *is* the "end of the div" In the linked question, `myDiv` is the scrolling div. The height (`myDiv.scrollHeight`) would be calculated every time it's called. I'm not sure what the problem is. – Heretic Monkey Jun 11 '20 at 16:05
  • Header+main content+footer, dynamically append data to the main content div. important is main content div was not overflow scroll and i want to trigger the event when window scroll reach to the end of the maincontent div. From above example the top and bottom variable retain the height of very first instance but its not refresh after the content bind to the main content, so its trigger event every time in first instance – Spurgeon Ebenezer Jun 12 '20 at 04:53

1 Answers1

0

Instead of listening to the scroll event you should have a look at Intersection Observer (IO) With IO you can react to when an element comes into view (or is about to come into view) / leaves the view. Smashing Magazine also has a great article about it, great pictures to help you understand it.

You could do it at follows for your your problem: You add an observable div at the end of your Content and whenever this div is about to get into view you load more data to append to the div.

Here is a tutorial on how you can do this. Keep in mind you don't have to show the "loading" text like in the example, that's just so you see what's going on.

It boils down to the following:

First you define the options for your IO: 

let options = {
  rootMargin: '50px'
}
let observer = new IntersectionObserver(callback, options);

Then you must define which element you want to watch for intersections: 

let entries = document.querySelectorAll('.load-more-content'); // example for observing more elements, you can also observe just one.
entries.forEach(entry => {observer.observe(entry);}) // if you observe one, you don't need the forEach part.

Last you need to define the callback function, what should happen once the observed element comes into view:

const observer = new IntersectionObserver(function (entries, self) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // load more content
    }
  });
}, config);

An easy example, whenever you scroll to the bottom of the content div, another div is appended. There is no ajax involved in this example, you might want to unobserve the IO once you don't have any more data to append from your ajax call.

Support is good for all major browsers, if you need to support IE there is a polyfill from w3c you can use. 

const loadMore = document.querySelector('.load-more-content');
const config = {
  rootMargin: '50px',
  threshold: [.2, .9]
};

const observer = new IntersectionObserver(function (entries, self) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      var content = document.querySelector('.my-content');
      content.innerHTML = content.innerHTML + '<div class="my-content"> More was "loaded"</div>';
    }
  });
}, config);


observer.observe(loadMore);
header,
footer {
  height: 10vh;
  background: pink;
}

.wrapper {
  height: 80vh;
  overflow: auto;
}

.my-content {
  min-height: 150vh;
}
<header> Some content </header>
<div class="wrapper">
  <div class="my-content">
    <p> Lorem Ipsum </p>
  </div>
  <div class="load-more-content">
    <!-- Whenever this div comes into view, we load more -->
  </div>
</div>
<footer>Content </footer>
cloned
  • 6,346
  • 4
  • 26
  • 38