IntersectionObserver implements rolling loading

  • If you don’t like tedious OnScroll, try IntersectionObserver
  • Here is the complete code, the logic is in the comments

So without further ado about the code

  • html / css
<! DOCTYPE html> <html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .box {
      display: flex;
      flex: 1;
      flex-direction: column;
      width: 400px;
      height: 100%;
      margin: 0 auto;
      border: 1px solid blue;
      min-height: 100px;
      max-height: 600px;
      margin-top: 30px;
      overflow: auto;
    }

    .list {
      flex: 1;
    }

    .top {
      width: 100%;
      height: 50px;
    }

    .bottom {
      width: 100%;
      min-height: 50px;
      background: #ccc;
      text-align: center;
      line-height: 50px;
    }

    .item-list {
      width: 90%;
      height: 100px;
      border: 1px solid red;
      margin: 10px auto;
    }
  </style>
</head>

<body>
  <div id="content" class="box">
  	
    <ul id="list" class="list"> // Data load location </ul> // load trigger guard <div id="bottom" class="bottom">... LoadingMore.... </div> </div> </body> <script src="./index.js"></script>

</html>
Copy the code
  • js
letlist = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26] class LoadMore { constructor(options) { this.observer = null; this.rootNode = document.getElementById(options.root); This.obsnode = document.getelementById (options.obs); this.obsnode = document.getelementById (options.obs); LoadMoreFn = options. LoadMoreFn // Load callback this.pageNum = 0; This. Total = -1; // Total pages -1 // not yet retrieved this.init() // initialization} // cross-trigger callback = (entries) => {console.log(111) // Prevent insertion instant trigger off cross-event againif (entries[0].intersectionRatio === 0) return; This.pagenum += 1 this.loadMorefn (this.pagenum)} // Disable cross-listeningcanclobserve() {
    console.log('完毕') this.observer.unobserve(this.obsnode)} // Set the first node to cross listenhanldeObserve() {this.observer.observe(this.obsnode)} // InitializeinitObserver = new IntersectionObserver(this.callback, {root: IntersectionObserver); // IntersectionObserver = new IntersectionObserver(this.callback, {root: Enclosing rootNode | | null, / / cross window, the root element rootMargin:'0px', // Crossover window boundary expansion or scaling threshold: 0.8 // crossover ratio (0 ~ 1), which will trigger the callback}); this.hanldeObserve() } }let loadEx = new LoadMore({
  root: 'content',
  obs: 'bottom', loadMoreFn: (pageNum) => {// The best page to close the listenerif(pageNum * 10 > list.length) {loadex.canclobServe ()} // Insert domletCurPage = list.slice((pageNum - 1) * 10, pageNum * 10) // Create a document fragmentlet frm = document.createDocumentFragment();
    for (let i = 0; i < curPage.length; i++) {
      let li = document.createElement('li')
      li.innerHTML = curPage[i];
      li.className = "item-list"
      frm.appendChild(li)
    }
    document.getElementById('list').appendChild(frm); frm = null; }})Copy the code