IntersectionObserver - 知否问答 - 万象云+社区

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>IntersectionObserver属性实例</title> <style> body{margin:0px;padding:0px;} .containter{height:300px;overflow:auto;border:1px solid #ccc;margin:50px;} .blank-area{padding-top:1000px;position:relative;} .show-info{padding-bottom:10px;} .demo-area{background-color:#aaa;height:100px;margin-top:50px;} </style> </head> <body> <div class="xms-demo-header tc"> <h1 class = "header-name">IntersectionObserver属性实例thresholds</h1> </div> <div id = "containter" class = "containter"> <div class = "blank-area"> 下面是一个rootMargin:100px的元素，这里就会被触发哦。 <div id = "demoArea" class = "demo-area">IntersectionObserver区域</div> </div> </div> <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function() { function _observer(entries) { const ratio = entries[0].intersectionRatio; console.log('ratio = ' + ratio); if (ratio >= 0.5) { setTimeout(() => { console.log('after 5s = ' + ratio) }, 5 * 1000) } } var observer = new IntersectionObserver(_observer, { threshold: [.1, .15, .2, .25, .3, .35, .4, .45, .5, .55, .6, .65, .7, .75], }); observer.observe($("#demoArea")[0]); console.log(observer); }); </script> </body> </html>

回答动态