使用IntersectionObserver的rootMargin要注意了
rootMargin设置不一定会有效,有效的几个情况如下:
1.设置了overflow的父级节点+rootMargin,如下:
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试IntersectionObserver</title> <style> html, body { width: 100%; height: 100%; background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; box-sizing: border-box; /* overflow-x: auto; */ } .container { margin: auto; width: calc(100% - 100px); height: 500px; border: 1px solid red; overflow-x: auto; } .list { width: 200vw; height: 500px; border: 1px solid blue; box-sizing: border-box; padding-left: 100px; } .listItem { width: 100px; height: 100px; background: white; } </style> </head> <body> <div class="container" id="container"> <div class="list" id="list"> <div class="listItem" id="listItem"></div> </div> </div> <script> let callback = (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { console.log("出现"); } else { console.log("消失"); } }); }; let options = { root: document.querySelector("#container"), // root为container时rootmargin生效 // root: null, // root为null时rootmargin不生效 rootMargin: "0px 50px", threshold: 0, }; let observer = new IntersectionObserver(callback, options); let target = document.querySelector("#listItem"); observer.observe(target); </script> </body> </html>
2.如果不设置root,即想要交叉对象是窗口的时候,需要去除滚动的父级节点,将html、body的overflow也去除(也去除的意思是不要设置),如下:
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试IntersectionObserver</title> <style> html, body { width: 100%; height: 100%; background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; box-sizing: border-box; } .container { margin: auto; width: calc(100% - 100px); height: 500px; border: 1px solid red; overflow-x: auto; } .list { width: 200vw; height: 500px; border: 1px solid blue; box-sizing: border-box; padding-left: 100px; } .listItem { width: 100px; height: 100px; background: white; } </style> </head> <body> <div class="list" id="list"> <div class="listItem" id="listItem"></div> </div> <script> let callback = (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { console.log("出现"); } else { console.log("消失"); } }); }; let options = { root: null, // root为null时rootmargin不生效 rootMargin: "0px 50px", threshold: 0, }; let observer = new IntersectionObserver(callback, options); let target = document.querySelector("#listItem"); observer.observe(target); </script> </body> </html>
3.如果不需要rootMargin或者rootMargin为0,那都是可以的,不需要额外的注意。
声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 使用IntersectionObserver的rootMargin要注意了
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 使用IntersectionObserver的rootMargin要注意了