<template>
  <div class="newsAnchor" ref="newsListRef" id="newsList"></div>
</template>
<script lang="ts" setup>
import { ref, onMounted,} from 'vue';
  const newsListRef = ref(null);

onMounted(() => {
    const observer = new IntersectionObserver(
        ([data]) => {
            // console.log('newsRef', data.isIntersecting); // true为dom元素到达可视区域,false为没有到达
            if (data.isIntersecting) {
             
                console.log(data.target.id)
                switch (data.target.id) {
                    case 'newsList':
                        activeNav.value = '0';
                        break;              
                }
            }
        },
        {
            threshold: 0.01,
        }
    );
    //tarage.value是监听的dom元素

    observer.observe(newsListRef.value);

});
</script>