Prevent from firing on initial load within inView() callback

[james0r]

Obviously I understand it's firing because they're "in view" but i only want something to happen when they intersect the top and bottom bounds of the root element. How can this be done?

I would think that I could leverage info.isIntersecting but this always seems to evaluate to true.

Current code:

  inView(
      componentEl,
      (info) => {
        console.log(info.isIntersecting)

        const currentYPositionEnter = info.boundingClientRect.top

        if (currentYPositionEnter < lastYPositionEnter) {
          console.log('Scrolling up, element is entering into view')
        } else if (currentYPositionEnter > lastYPositionEnter) {
          console.log(info)
          console.log('Scrolling down, element is entering into view')
        }

        lastYPositionEnter = currentYPositionEnter

        return (leaveInfo) => {
          const currentYPositionLeave = leaveInfo.boundingClientRect.top

          if (currentYPositionLeave < lastYPositionLeave) {
            console.log('Scrolling up, element is leaving the view')
          } else if (currentYPositionLeave > lastYPositionLeave) {
            console.log('Scrolling down, element is leaving the view')
          }

          lastYPositionLeave = currentYPositionLeave
        }
      },
      {
        root: componentEl.parentElement,
      }
    )
    ```