gets rid of interaction observer

This commit is contained in:
MinamiFunakoshiTR 2025-06-24 11:51:14 -07:00
parent 6858a8a868
commit b17ce2ee4b
Failed to extract signature
2 changed files with 5 additions and 30 deletions

View file

@ -1,6 +1,6 @@
<!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) -->
<script lang="ts">
import { onMount, type Snippet } from 'svelte';
import { type Snippet } from 'svelte';
interface Props {
/**
@ -29,8 +29,9 @@
* Specify a pixel value.
*/
right?: number;
/** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
threshold?: number;
/**
* A snippet that renders inside the component.
*/
children?: Snippet<[boolean]>;
}
@ -40,7 +41,6 @@
bottom = 0,
left = 0,
right = 0,
threshold = 0,
children,
}: Props = $props();
@ -62,31 +62,6 @@
if (once && visible) visibleOnce = true;
}
}
onMount(() => {
if (typeof IntersectionObserver !== 'undefined') {
const rootMargin = `${top}px ${right}px ${bottom}px ${left}px`;
const observer = new IntersectionObserver(
(entries) => {
visible = entries[0].isIntersecting;
if (visible && once && container) {
observer.unobserve(container);
}
},
{
rootMargin,
threshold,
}
);
if (container) observer.observe(container);
// Unobserve when the component is unmounted
return () => {
if (container) observer.unobserve(container);
};
}
});
</script>
<svelte:window onscroll={scrollHandler} />

View file

@ -5,7 +5,7 @@
import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte';
import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
let top = 200;
let top = 100;
const demoText =
'Take a look at the *Elements* tab in Inspector to see how the photo in the middle of the page appears in the DOM only when its container comes into view.';