JavaScript Positions - Cheatsheet

element.getBoundingClientRect()

function getCoords() {
  const body = document.body
  const docEl = document.documentElement

  const scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop
  const scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft

  const clientTop = docEl.clientTop || body.clientTop || 0
  const clientLeft = docEl.clientLeft || body.clientLeft || 0

  const top = scrollTop - clientTop
  const left = scrollLeft - clientLeft

  return { top: Math.round(top), left: Math.round(left) }
}

window.scroll({
  top: 0,
  left: 0,
  behavior: "smooth",
})

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect()
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <=
      (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  )
}