gets rid of interaction observer
This commit is contained in:
parent
6858a8a868
commit
b17ce2ee4b
2 changed files with 5 additions and 30 deletions
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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.';
|
||||
|
|
|
|||
Loading…
Reference in a new issue