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

.
Menu