2

I want to implement infinite scrolling in the table, so I am calculating div height in one possible way, you can see below

 let fixedCh = e.target.clientHeight;
 let calCh = e.target.scrollHeight - e.target.scrollTop;
 if (fixedCh === calCh) {
      alert('load more');
    }

In this approach,calCh is varied from different resolutions. Is there any other way of doing this, so that it can work through all kind of browser and screen resolution

Supriya Kumari
  • 181
  • 2
  • 14
  • Does this help? https://stackoverflow.com/questions/3962558/javascript-detect-scroll-end –  Mar 23 '21 at 08:14

1 Answers1

0

Your approach is good; you need to call your function initially when the user loads the page to check if the user's screen resolution is already to the end of the scroll, call "alert('load more')".

The problem is that for some users, based on their screen, the scrollbar will not be visible to scroll, so your event of scroll won't check the element. To fix this, as I said above, you need to initially load your screen check function when the "Dom is ready".

Here is the basic implementation:

function loadMore (e) {
  let fixedCh = e.clientHeight;
  let calCh = e.scrollHeight - e.scrollTop;
  if (fixedCh === calCh) {
    alert('load more');
  }
}

// listen on scroll and check target element fixedCh === calCh
function listenOnScroll() {
  document.getElementById('app').addEventListener('scroll', (e) => {
    loadMore(e.target)
  })
},


window.onload = (event) => {
  loadMore(document.getElementById('app').target)
};

I will call the function "loadMore" when the dom is ready or loaded and pass the targetted Dom element.

Later, I'll call the "listenOnScroll" function to listen on the target element scroll and then call the "loadMore" function from it.

Riyaz Khan
  • 2,765
  • 2
  • 15
  • 29
  • What about resolutions? It is not working on my friend's laptop, but working for me. – Supriya Kumari Mar 23 '21 at 08:01
  • The above code in your case only cares about the target element's height. If it varies in your friends' laptop, it's because your target element's scroll height and clientHeight are less than his/her screen resolution. – Riyaz Khan Mar 23 '21 at 08:12
  • @SupriyaKumari I updated the answer, hope this will help you. – Riyaz Khan Mar 23 '21 at 08:44