使用IntersectionObserver 实现下拉加载更多
IntersectionObserver
是浏览器原生提供的构造函数,接受两个参数:callback
是可见性变化时的回调函数,option
是配置对象(该参数可选)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script> --> <title>intersectionObserver</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } div { margin: 0 auto; max-width: 100%; width: 600px; } #top { height: 600px; background-color: #aaaaaa; } #middle { margin-top: 200px; opacity: 0; height: 800px; background-color: #000000; } #bottom { height: 200px; background-color: #333; } div.move, #top.move, #middle.move, #bottom.move { animation: movefromleft 2s; animation-fill-mode: forwards; } @keyframes movefromleft { from { opacity: 0; transform: translateX(-300px); } to { opacity: 1; transform: translateX(0px); } } </style> </head> <body> <div id="top"></div> <div id="middle"></div> <div id="bottom"></div> <div id="b_B"></div> </body> <script> window.onload = (event) => { const middle = document.getElementById('middle'), top = document.getElementById('top'), bottom = document.getElementById('bottom'); var last = document.getElementById('b_B') const animationClass = 'move'; // 创建监听 const intersectionObserver = new IntersectionObserver((entries) => { for (entry of entries) { if (entry.target.id == 'b_B' && entry.intersectionRatio > 0) { var c = document.createElement('div'); c.style.cssText = "border:1px solid black; background-color: pink; height: 100px;"; document.querySelector('body').appendChild(c) bottom.parentNode.insertBefore(c, bottom) intersectionObserver.observe(c); addAnimationClass(entry.target, animationClass) } if (entry.intersectionRatio > 0) { console.log('===================================='); console.log(entry.target); console.log('===================================='); addAnimationClass(entry.target, animationClass); } else { removeAnimationClass(entry.target, animationClass); } } }); // let attributesChangeEl = document.querySelector("body") // let config = { childList: true } // let observer1 = new MutationObserver(mutationsList => { // last = mutationsList[0].addedNodes[0] // }) // observer1.observe(attributesChangeEl, config) // 添加动画class的操作 function addAnimationClass(elem, animationClass) { elem.className.includes(animationClass) ? 1 : elem.className = elem.className + animationClass; } // 移除动画class的操作 function removeAnimationClass(elem, animationClass) { elem.className.includes(animationClass) ? elem.className = elem.className.replace(animationClass, '') : 1; } // 开启监听 intersectionObserver.observe(top); intersectionObserver.observe(middle); intersectionObserver.observe(last); } </script> </html>