如何使用 vue 使元素出現在滾動條上

Question

我的 vuejs 應用程序（nuxt 2.15）有問題：我使用.appear使我的元素出現在滾動上。出現我用這種方法“手動”添加的（綁定到滾動事件）：

 document.querySelectorAll('.part > *:not(.appear)').forEach(element => {
            const posTop = rect(element).top
            const trigger = window.innerHeight * 0.8
            if (posTop < trigger) {
                element.classList.add('appear')
            }
 })

這部分工作，但問題是有時當一個組件重新渲染 class .appear被 vue 刪除。 我該如何解決這個問題？

Answer 1

沒錯，重新渲染會清除我們通過 DOM API 添加的那些屬性。 因此，在大多數情況下，在使用 Vue 等前端框架時，我們會盡量不使用 DOM API。

這個Intersection Observer API可以幫助我們檢查元素是否已滾動到視口中。 有了這個功能，我們可以在data()中添加一個像 isSeen 一樣的isSeen ，並使用該 state 來確定我們應該在<template>中顯示哪些類。

您可以查看此Vue SFC Playground以獲取實時示例。 我建議您打開 Inspector 並查看何時將.appear class 添加到容器中。

• 向下滾動以查看那些<Counter /> “出現”（嗯，它們在一開始就已經存在，我們只是在它們上添加類）
• 點擊“增量”使<Counter />重新渲染，看到.appear class 還在