# Intersection Observer

function setWindowScroll() {
  document.addEventListener('scroll', () => {
    boxs.forEach(box => {
      if (isShowElement(box)) {
        box.classList.add('show')
      } else {
        box.classList.remove('show')
      }

      console.count('Window Scroll')
    })
  })

  function isShowElement(target) {
    var rect = target.getBoundingClientRect()

    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    )
  }
}

function setIntersectionObserver() {
  const options = { }

  const callback = (entries, observer) => {
    entries.forEach(entry => {
      
      const { isIntersecting, target } = entry

      if (isIntersecting) {
        target.classList.add('show')
      } else {
        target.classList.remove('show')
      }

      console.count('Intersection Observer')
    })
  }

  const io = new IntersectionObserver(callback, options)

  boxs.forEach(box => {
    io.observe(box)
  })
}

const instance = new IntersectionObserver(callback [, options])

instance.observe(domElement)