vue-hooks-plus/es/useInViewport/index.js

Vue hooks library

import { ref, readonly } from "vue";
import { getTargetElement } from "../utils/domTarget";
import useEffectWithTarget from "../utils/useEffectWithTarget";
function useInViewport(target, options) {
  const state = ref();
  const ratio = ref();
  useEffectWithTarget(
    () => {
      const el = getTargetElement(target);
      if (!el) {
        return;
      }
      const observer = new IntersectionObserver(
        (entries) => {
          for (const entry of entries) {
            state.value = entry.isIntersecting;
            ratio.value = entry.intersectionRatio;
          }
        },
        {
          ...options,
          root: getTargetElement(options == null ? void 0 : options.root)
        }
      );
      observer.observe(el);
      return () => {
        observer.disconnect();
      };
    },
    [],
    target
  );
  return [readonly(state), readonly(ratio)];
}
export {
  useInViewport as default
};