site_logiciels/components/Layout/AnchoredSection.vue

<template>
  <div :id="id" ref="section" v-scroll="onScroll">
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { Ref } from "vue";
import { useLayoutStore } from "~/stores/layoutStore";

const layoutStore = useLayoutStore();

const props = defineProps({
  id: {
    type: String,
    required: true,
  },
});

if (!props.id) {
  throw new Error("Anchor's id is missing");
}

const section: Ref<HTMLElement | null> = ref(null);

layoutStore.setIsAnchoredSectionOnScreen(props.id, false);

const top: Ref<number | null> = ref(null);
const bottom: Ref<number | null> = ref(null);

// @ts-ignore
const onScroll = (scroll) => {
  top.value = section.value!.offsetTop;
  bottom.value = section.value!.offsetTop + section.value!.offsetHeight;

  if (top.value === null || bottom.value === null) {
    return;
  }

  const screenVerticalCenter =
    scroll.target.documentElement.scrollTop + window.innerHeight / 2;

  const active =
    screenVerticalCenter > top.value && screenVerticalCenter < bottom.value;
  if (active !== layoutStore.isAnchoredSectionOnScreen[props.id]) {
    layoutStore.setIsAnchoredSectionOnScreen(props.id, active);
  }
};
</script>

<style scoped></style>