Breaking News: Grepper is joining You.com. Read the official announcement!

Svelte - Intersection Observer with Params

Agreeable Ant answered on September 6, 2022 Popularity 1/10 Helpfulness 1/10

answer Svelte - Intersection Observer with Params

Svelte - Intersection Observer with Params

Comment

export default function inView(node, params = {}) {
  let observer;

  const handleIntersect = (e) => {
    const v = e[0].isIntersecting ? "enter" : "exit";
    node.dispatchEvent(new CustomEvent(v));
  };

  const setObserver = ({ root, top, bottom }) => {
    const marginTop = top ? top * -1 : 0;
    const marginBottom = bottom ? bottom * -1 : 0;
    const rootMargin = `${marginTop}px 0px ${marginBottom}px 0px`;
    const options = { root, rootMargin };
    if (observer) observer.disconnect();
    observer = new IntersectionObserver(handleIntersect, options);
    observer.observe(node);
  };

  setObserver(params);

  return {
    update(params) {
      setObserver(params);
    },

    destory() {
      if (observer) observer.disconnect();
    },
  };
}

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: intersection-observer javascript svelte

Link to this answer
Share Copy Link

Contributed on Sep 06 2022

Agreeable Ant

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

Svelte - Intersection Observer with Params

Contents

More Related Answers

Svelte - Intersection Observer with Params

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.