feat: add useVisibilityChange

src/composition/use-visibility-change.ts

@@ -0,0 +1,35 @@
+import { inBrowser } from '../utils';
+import { Ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';
+
+export function useVisibilityChange(
+  target: Ref<Element>,
+  onChange: () => void
+) {
+  // compatibility: https://caniuse.com/#feat=intersectionobserver
+  if (!inBrowser || !window.IntersectionObserver) {
+    return;
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      // visibility changed
+      if (entries[0].intersectionRatio > 0) {
+        onChange();
+      }
+    },
+    { root: document.body }
+  );
+
+  const observe = () => {
+    observer.observe(target.value);
+  };
+
+  const unobserve = () => {
+    observer.observe(target.value);
+  };
+
+  onMounted(observe);
+  onActivated(observe);
+  onUnmounted(unobserve);
+  onDeactivated(unobserve);
+}