Intersect Observer

This composable provides an easy way to create a native IntersectionObserver. Attach an element and watch its status via the onObserve callback. It is also possible to connect or disconnect at any time.

Scroll Down

Element

export default defineComponent({
  setup() {
    const element = ref<HTMLDivElement>();

    const observer = useIntersectObserver({
      element: element,
      onObserve: () => {
        console.log("Element is observed:", element.value);
      },
    });

    return () => (
      <>
        <TButton design="flat" me="sm" disabled={observer.connected.value} onClick={observer.connect}>
          Connect
        </TButton>
        <TButton design="flat" disabled={!observer.connected.value} onClick={observer.disconnect}>
          Disconnect
        </TButton>

        <TDivider my />

        <TCard design="raised" color={observer.intersected.value ? "primary" : "secondary"} p="xl">
          <TCell class="text-white" p="xl" my="xl">
            Scroll Down
          </TCell>
          ...
          <div ref={element}>
            <TCard design="raised" color="success" p="xl" my="xl">
              Element
            </TCard>
          </div>
        </TCard>
      </>
    );
  },
});

Composables

Inkwell

Composables

Keyboard