.container{
  width: 300px;
  height: 300px;
  background: pink;
  overflow: auto;
}
.gap{
  height: 500px;
}
.box{
  width: 100px;
  height: 100px;
  background: red;
}

const root = document.querySelector('.container');

const options = {
  root
};

const callback = (entries, observer) => { 
    entries.forEach(entry => {
      if(entry.isIntersecting){
        console.log("into")
      }else{
        console.log("leave")
      }
    });
};

const observer = new IntersectionObserver(callback, options);

// const targets = document.querySelectorAll('.box');
// for (const target of targets) {
//   observer.observe(target);  
// }
const target = document.querySelector('.box');
observer.observe(target);