SOURCE

const oContainer = document.querySelector('.container');
const oTrigger = document.querySelector('.trigger');

const intersectionObserver = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return;
    
    console.log('Loaded new items');
}, { root: oContainer });


intersectionObserver.observe(oTrigger);

<div class="container">
    <div class="content"></div>
    <div class="trigger"></div>
</div>

.container {
    height: 300px;
    border: 4px solid green;
    overflow: hidden scroll;
}

.content {
    height: 130vh;
    background-color: greenyellow;
}

.trigger {
    height: 100px;
    background-color: black;
}