scrollscrollTopclientHeightscrollHeight
:scroll
:
<style>
  -sharpcontainer {
    height: 200px;
    overflow-x: hidden;
  }
  .ele {
    height: 50px;
    width: 100%;
  }
</style>
<script>
  let container = document.getElementById("container");
  container.onscroll = () => {
    if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
            console.log("reached!");
        }
  }
</script>
<!-- scroll -->
<div id="container">
  <div class="ele">item1</div>
  <div class="ele">item2</div>
  <div class="ele">item3</div>
  <div class="ele">item4</div>
</div>
<!-- scroll -->
<div id="container">
  <div class="ele">item1</div>
  <div class="ele">item2</div>
  <div class="ele">item3</div>
  <div class="ele">item4</div>
  <div class="ele">item5</div>
</div>