intersectionObserver.mjs 913 B

123456789101112131415161718192021222324252627282930
  1. // Utilities
  2. import { onBeforeUnmount, ref, shallowRef, watch } from 'vue';
  3. import { SUPPORTS_INTERSECTION } from "../util/index.mjs";
  4. export function useIntersectionObserver(callback, options) {
  5. const intersectionRef = ref();
  6. const isIntersecting = shallowRef(false);
  7. if (SUPPORTS_INTERSECTION) {
  8. const observer = new IntersectionObserver(entries => {
  9. callback?.(entries, observer);
  10. isIntersecting.value = !!entries.find(entry => entry.isIntersecting);
  11. }, options);
  12. onBeforeUnmount(() => {
  13. observer.disconnect();
  14. });
  15. watch(intersectionRef, (newValue, oldValue) => {
  16. if (oldValue) {
  17. observer.unobserve(oldValue);
  18. isIntersecting.value = false;
  19. }
  20. if (newValue) observer.observe(newValue);
  21. }, {
  22. flush: 'post'
  23. });
  24. }
  25. return {
  26. intersectionRef,
  27. isIntersecting
  28. };
  29. }
  30. //# sourceMappingURL=intersectionObserver.mjs.map