檢查是否有出現在畫面中可以使用IntersectionObserver

 直接附上程式碼，本程式以vue3寫法為範例

<template>

    <div>

        <div> ... </div>
        <div v-if="!checkFinished" :style="{ height: footerRef?.clientHeight + 'px' }"></div>

    <div ref="heightCheckerRef" :style="{ height: marginBottom + 'px' }" />

        <div ref="footerRef" class="px-3 py-4 fixed">

        <button class="bg-gray-500 w-full text-white rounded py-2">返回网站</button>

    </div>

    </div>

</template>

<script setup>

const footerRef = ref(null)

const heightCheckerRef = ref(null)

const checkFinished = ref(false)

const marginBottom = ref(0)

onMounted(async () => {

  // 在資料齊全後

const observer = new IntersectionObserver(([checker]) => {

if (!checker.isIntersecting) { // 是否有在畫面上

marginBottom.value = footerRef.value.offsetHeight

}

    observer.unobserve(heightCheckerRef.value) // 取消觀察

checkFinished.value = true

})

observer.observe(heightCheckerRef.value) // 放入要觀察的DOM

})

</scirpt>

畫面中情境為footer是fixed，如果有內容被footer擋住，那勢必要設個margin-bottom，可以用類似的方法去做檢查

同理，如果有scroll的情境，拉致最底需要加載資料，可以不用在那邊算高度了，也可以使用IntersectionObserver去檢查最底下區塊是否有出現在畫面中，一旦出現就加載，直到最後一頁