client/src/app/helpers/utils/dom.ts

   1 function scrollToTop (behavior: 'auto' | 'smooth' = 'auto') {
   2   window.scrollTo({
   3     left: 0,
   4     top: 0,
   5     behavior
   6   })
   7 }
   8
   9 function isInViewport (el: HTMLElement, container: HTMLElement = document.documentElement) {
  10   const boundingEl = el.getBoundingClientRect()
  11   const boundingContainer = container.getBoundingClientRect()
  12
  13   const relativePos = {
  14     top: 0,
  15     left: 0,
  16     bottom: 0,
  17     right: 0
  18   }
  19
  20   relativePos.top = boundingEl.top - boundingContainer.top
  21   relativePos.left = boundingEl.left - boundingContainer.left
  22
  23   return relativePos.top >= 0 &&
  24     relativePos.left >= 0 &&
  25     boundingEl.bottom <= boundingContainer.bottom &&
  26     boundingEl.right <= boundingContainer.right
  27 }
  28
  29 function isXPercentInViewport (el: HTMLElement, percentVisible: number) {
  30   const rect = el.getBoundingClientRect()
  31   const windowHeight = (window.innerHeight || document.documentElement.clientHeight)
  32
  33   return !(
  34     Math.floor(100 - (((rect.top >= 0 ? 0 : rect.top) / +-(rect.height / 1)) * 100)) < percentVisible ||
  35     Math.floor(100 - ((rect.bottom - windowHeight) / rect.height) * 100) < percentVisible
  36   )
  37 }
  38
  39 export {
  40   scrollToTop,
  41   isInViewport,
  42   isXPercentInViewport
  43 }