(function(last, parent) { const observer = new IntersectionObserver((entries) => { entries .filter(entry => entry.isIntersecting) .forEach(entry => { console.log(entry.target.id, entry.intersectionRatio); last.innerHTML = entry.target.id + ': ' + entry.intersectionRatio }); }, { root: parent }); for (let i = 1; i <= 100; i++) { const child = document.createElement('div'); child.id = String(i); child.innerHTML = child.id; parent.appendChild(child); observer.observe(child); } })(document.getElementById('last'), document.getElementById('parent'));
<div id="last"></div> <div class="wrapper"> <div id="parent"></div> </div>
body { overflow-y: hidden; } .wrapper { background:#E7ECF5; border: 2px solid #02E4FF; padding: 2em; } #parent { height: 350px; overflow-y: scroll; div { padding: 0.5em; background: #fff; border: 1px solid #F6A6FF; border-bottom: 0; } } #last { position: absolute; top: 20px; right: 20px; background: #465466; border-radius: 4px; box-shadow: 0px 2px 28px 0px rgba(0,0,0,0.25); color: white; padding: 1em; }