<div class="tip-info" @scroll="handleScroll">
    <div class="tip-blank" :key="outerIndex" v-for="(item, outerIndex) in htmlCaption">
</div>

methods: {
    // 滾動(dòng)事件
    handleScroll(event) {
      const dialog = event.target;
      if (dialog.scrollHeight - dialog.scrollTop === dialog.clientHeight) {
        // 當(dāng)內(nèi)容滑動(dòng)到底部時(shí)，執(zhí)行想要的操作
      }
    }
}

<div class="tip-info">
    <div class="tip-blank" :key="outerIndex" v-for="(item, outerIndex) in htmlCaption">
</div>

mounted() {
    this.addNewElementToTipBlank();
},
 methods: {
    addNewElementToTipBlank() {
      // 創(chuàng)建新元素
      const newElement = document.createElement('div');
      newElement.className = 'tip-box';
      newElement.textContent = 'New Tip Box Added';
      // 找到 tip-blank 類所在的 div 元素
      const tipBlankDivs = document.querySelectorAll('.tip-blank');
      const lastTipBlankDiv = tipBlankDivs[tipBlankDivs.length - 1]; // 獲取最后一個(gè) tip-blank 元素
      // 在最后一個(gè) tip-blank 元素后面插入新的 div 元素
      if (lastTipBlankDiv) {
        lastTipBlankDiv.insertAdjacentElement('afterend', newElement);
      }
      // 創(chuàng)建一個(gè)觀察者實(shí)例
      const observer = new IntersectionObserver((entries) => {
        console.log(entries);
        entries.forEach((entry) => {
          // entry.isIntersecting 判斷目標(biāo)元素是否在視口中
          if (entry.isIntersecting) {
            console.log('目標(biāo)元素在視口中!');
          }
          else {
            console.log('目標(biāo)元素不在視口中.');
          }
        });
      });
      // 開始觀察某個(gè)元素
      const targetElement = document.querySelector('.tip-box');
      if (targetElement) {
        observer.observe(targetElement);
      }
      // 停止觀察
      // 如果你不再需要觀察某個(gè)元素，你可以調(diào)用：
      observer.unobserve(targetElement);
      // 如果你想停止觀察所有元素，你可以調(diào)用：
      observer.disconnect();
    },
}

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        // entry.isIntersecting 判斷目標(biāo)元素是否在視口中
        if (entry.isIntersecting) {
            console.log('目標(biāo)元素在視口中!');
        } else {
            console.log('目標(biāo)元素不在視口中.');
        }
    });
});
// 開始觀察某個(gè)元素
const targetElement = document.querySelector('.some-class');
observer.observe(targetElement);

// 停止觀察
// 如果你不再需要觀察某個(gè)元素，你可以調(diào)用：
observer.unobserve(targetElement);
// 如果你想停止觀察所有元素，你可以調(diào)用：
observer.disconnect();

// 配置選項(xiàng)
當(dāng)創(chuàng)建 IntersectionObserver 實(shí)例時(shí)，你可以提供一個(gè)配置對(duì)象，該對(duì)象有以下屬性：
const options = {
    root: document.querySelector('.scroll-container'), // 觀察目標(biāo)的父元素，如果不設(shè)置，默認(rèn)為瀏覽器視口
    rootMargin: '10px', // 增加或減少觀察目標(biāo)的可見區(qū)域大小
    threshold: [0, 0.25, 0.5, 0.75, 1] // 當(dāng)觀察目標(biāo)的可見比例達(dá)到這些閾值時(shí)會(huì)觸發(fā)回調(diào)函數(shù)
};
const observer = new IntersectionObserver(callback, options);

// 圖片懶加載
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.lazy;
            observer.unobserve(img);
        }
    });
});
document.querySelectorAll('img[data-lazy]').forEach(img => {
    observer.observe(img);
});

// 無線滾動(dòng)加載
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            loadMoreContent(); // 你的加載更多內(nèi)容的函數(shù)
            observer.unobserve(entry.target); // 如果你只想加載一次，你可以在這里停止觀察
        }
    });
});
const loadMoreTrigger = document.querySelector('.load-more-trigger');
observer.observe(loadMoreTrigger);

<template>
    <div class="tip-info" @scroll.passive="handleScroll">
        <div class="sn-f-c-c tip-blank" :key="i" v-for="(item, i) in caption">
            {{item}}
        </div>
    </div>
</template>
 
<script>
    data() {
        return {
            caption: []
        };
    },
    methods: {
        // 接口返回?cái)?shù)據(jù)
        interface() {
            this.caption = ''; // 接口返回?cái)?shù)據(jù)
            if (this.caption.length > 0) {
                this.$nextTick(() => {
                  this.handleScroll({
                    target: document.querySelector('.tip-info')
                  });
                });
            }
        },
        handleScroll(e) {
          const { scrollTop, clientHeight, scrollHeight } = e.target;
            // 條件判斷(scrollHeight - (scrollTop + clientHeight)) / clientHeight <= 0.05
            // 是在計(jì)算滾動(dòng)條距離底部的距離與可視區(qū)域高度的比例。如果這個(gè)比例小于或等于5%（0.05），則認(rèn)為滾動(dòng)條已經(jīng)非常接近底部。
            if ((scrollHeight - (scrollTop + clientHeight)) / clientHeight <= 0.05) {
                console.log('內(nèi)容到底了');
            }       
        }  
    }
</script>