<script>

  import { onMount } from 'svelte'

​

  let isVisible = false;

  let element;

​

  const handleIntersect = (e, observer) => {

    e.forEach(entry => {

      isVisible = entry.isIntersecting;

      if (entry.isIntersecting) {

        observer.unobserve(entry.target);

      }

    })

  }

​

  onMount(() => {

    const root = null;

    const rootMargin = '0px 0px -100px 0px';

    const options = { root, rootMargin };

​

    const observer = new IntersectionObserver(handleIntersect, options);

    observer.observe(element);

  })

</script>

​

<div

  bind:this={element}

  class:visible={isVisible}

>

  <slot {isVisible} />

</div>

​

<style>

  div {

    opacity: 0;

    transform: translateY(100px);

    transition: all 1s ease-in-out;

  }

  div.visible {

    opacity: 1;

    transform: translateY(0)

  }

</style>

​

npm i react-intersection-observer

import React from 'react';

import { useInView } from 'react-intersection-observer';

​

const Component = () => {

  //ref pass in element inView is true when we move to ref part in webpage

  const { ref, inView, entry } = useInView({

    /* Optional options */

    threshold: 0,

  });

​

  return (

    <div ref={ref}>

      <h2>{`Header inside viewport ${inView}.`}</h2>

    </div>

  );

};

yarn add react-intersection-observer

import React,{useState, useRef, useMemo, useEffect} from 'react'

​

const Test = () => {

​

    const targetRef = useRef(null)

    const [isVisible, setIsVisible] = useState(false)

    const callBackFunc = (entries) => {

        const [entry] = entries

        console.log(entries);

        setIsVisible(entry.isIntersecting)

    }

​

    const options = useMemo(() => {

        return{

            root: null,

            rootMargin: '0px',

            threshold: 0.1

        }

    }, [])

​

    useEffect(() => {

        const observer = new IntersectionObserver(callBackFunc, options);

        const currentTarget = targetRef.current;

        if(currentTarget)

        {

            observer.observe(currentTarget)

        }

​

        return () => {

            if(currentTarget)

            {

                observer.unobserve(currentTarget)

            }

        }

​

    }, [targetRef, options])

​

  return (

    <div>

        <h1> {isVisible ? 'In ViewProt ' : 'not in View port'} </h1>

​

        <div style={{ width: '100%', height: '100vh' }}></div>

​

        <div ref={targetRef}>Load more</div>

    </div>

  )

}

​

export default Test

var observer = new IntersectionObserver(changes => {

  for (const change of changes) {

    console.log(change.time);               // Timestamp when the change occurred

    console.log(change.rootBounds);         // Unclipped area of root

    console.log(change.boundingClientRect); // target.getBoundingClientRect()

    console.log(change.intersectionRect);   // boundingClientRect, clipped by its containing block ancestors, and intersected with rootBounds

    console.log(change.intersectionRatio);  // Ratio of intersectionRect area to boundingClientRect area

    console.log(change.target);             // the Element target

  }

}, {});

​

// Watch for intersection events on a specific target Element.

observer.observe(target);

​

// Stop watching for intersection events on a specific target Element.

observer.unobserve(target);

​

// Stop observing threshold events on all target elements.

observer.disconnect();

const numSteps = 20.0;

​

let boxElement;

let prevRatio = 0.0;

let increasingColor = "rgba(40, 40, 190, ratio)";

let decreasingColor = "rgba(190, 40, 40, ratio)";

​

// Set things up

window.addEventListener("load", (event) => {

  boxElement = document.querySelector("#box");

​

  createObserver();

}, false);