檢查是否有出現在畫面中可以使用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去檢查最底下區塊是否有出現在畫面中，一旦出現就加載，直到最後一頁

HD鬼故事第N集

 HD鬼故事第N集：

在公元2xxx年，一日雲端設備有些故障，某位年薪據說超過千萬的高級工程師，一頓操作猛如虎，下了重開機指令，頓時風雲變色，機器再啟之際已無過往跡象，不僅程式碼刪光，連資料庫也不見蹤跡，詢問原A場員工才得知，當初啟用機器使用的是暫存碟，也就是重啟資料就會刪得精光，且是破壞式格式化，一旦重啟神仙難救。

公司上下馬上盤點各種可能補救措施，力求把多年客戶資料給救回來，有人提出備份的資料庫（在原來硬碟一起被格式化了，至於為什麼備份的資料庫要跟資料庫放同一個硬碟，這又是另一則鬼故事了），也有人想從request的log試圖把資料補救一點回來，可惜最終依然無力回天。昨日種種譬如昨日死。

沒人知道這年薪千萬的工程師最終下場如何，只知道，做人最好不要太自負，不熟要懂得請教專業人員。

最終，今年才剛開始，希望人人都能領到下個月薪水過個好龍龍year~

免責聲明：以上都是我在翻閱九陽神功時，不小心撇見旁邊的註解文，也不知道什麼意思就轉錄出來了，如有雷同絕對是巧合

Tauri 濃縮版的Electron.js

前言

老實說我還沒開始學這塊，因為也沒什麼場景可以使用，但網路上看起來這玩意兒挺有趣的，相比起來也更輕量，未來或許有機會用到，先做一下紀錄

附上參考連結