Check if a element will appear in the screen

will-appear.js

const throttle = (limit, fn) => {
  let wait = false

  return (...args) => {
    if (!wait) {
      fn(...args)
      wait = true
      setTimeout(() => {
        wait = false
      }, limit)
    }
  }
}

const willAppear = element => {
  const rect = element.getBoundingClientRect()
  const safetyMargin = window.innerHeight / 2
  return rect.bottom >= -safetyMargin && rect.top <= window.innerHeight + safetyMargin
}

const el = document.getElementById('second')
window.addEventListener('scroll', throttle(100, () => {
  console.log('willAppear', willAppear(el))
}))