vue判斷內容是否滑動到底部的三種方式

更新時間：2024年04月01日 11:28:23 作者：圓音

這篇文章主要介紹了vue判斷內容是否滑動到底部的三種方式,文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下

方式一：直接給滾動的部分加個 @scroll="handleScroll" 然后js里面進行業(yè)務處理

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

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

方式二：可以采用給滾動內容，在最后一個內容的div后面追加一個新的元素，然后IntersectionObserver 進行觀察

<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]; // 獲取最后一個 tip-blank 元素
      // 在最后一個 tip-blank 元素后面插入新的 div 元素
      if (lastTipBlankDiv) {
        lastTipBlankDiv.insertAdjacentElement('afterend', newElement);
      }
      // 創(chuàng)建一個觀察者實例
      const observer = new IntersectionObserver((entries) => {
        console.log(entries);
        entries.forEach((entry) => {
          // entry.isIntersecting 判斷目標元素是否在視口中
          if (entry.isIntersecting) {
            console.log('目標元素在視口中!');
          }
          else {
            console.log('目標元素不在視口中.');
          }
        });
      });
      // 開始觀察某個元素
      const targetElement = document.querySelector('.tip-box');
      if (targetElement) {
        observer.observe(targetElement);
      }
      // 停止觀察
      // 如果你不再需要觀察某個元素，你可以調用：
      observer.unobserve(targetElement);
      // 如果你想停止觀察所有元素，你可以調用：
      observer.disconnect();
    },
}

IntersectionObserver具體的用法：

IntersectionObserver 是一個現(xiàn)代的瀏覽器 API，允許開發(fā)者在某個元素與其祖先元素或頂層文檔視口發(fā)生交叉時得到通知。它非常適合實現(xiàn)圖片懶加載、無限滾動、廣告曝光率等功能。

1. 瀏覽器的兼容性

IntersectionObserver目前在大多數(shù)現(xiàn)代瀏覽器中都得到了支持。但是在一些老版本的瀏覽器，如 IE 中，則沒有支持。點擊查看 IntersectionObserver 的兼容性

2. 如何使用？

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

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

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

3. 一些常見的應用場景

// 圖片懶加載
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);
});

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

方式三如果前2種方式不可行，可試試這一種

<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: {
        // 接口返回數(shù)據
        interface() {
            this.caption = ''; // 接口返回數(shù)據
            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
            // 是在計算滾動條距離底部的距離與可視區(qū)域高度的比例。如果這個比例小于或等于5%（0.05），則認為滾動條已經非常接近底部。
            if ((scrollHeight - (scrollTop + clientHeight)) / clientHeight <= 0.05) {
                console.log('內容到底了');
            }       
        }  
    }
</script>

以上就是vue判斷內容是否滑動到底部的三種方式的詳細內容，更多關于vue判斷內容是否滑動到底部的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: