Several questions about JS snooping scroll to realize pull-down loading

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>
Mar.20,2021

determine whether the height addition of .ele is equal to the height of container, which is greater than that of binding onscroll, and executes the method you want to execute separately if the binding height is less than.

but then again, this problem allows the interface to transmit more .ele data during initialization. If there is not so much data, there is no need to listen for scrolling

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb0a5a-22ef.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb0a5a-22ef.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?