超实用！Vue判断网页是否滑动到底部的三个实战技巧

Vue判断内容是否滑动到底部的三种方式，文中通过代码示例给大家介绍得非常详细。这些方法包括：使用 DOM 元素的 scrollHeight 和 scrollTop 属性进行判断，利用 Intersection Observer API 来观察底部元素是否进入可视区域。每种方法都有其适用场景和注意事项，开发者可以根据具体需求选择合适的方式。希望本文对需要此功能的朋友提供了有益的参考。

一、使用 DOM 元素的 scrollHeight 和 scrollTop 属性进行判断

直接给滚动的部分加个 @scroll=”handleScroll”，然后 js 里面进行业务处理。

HTML 代码：

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

JS 代码：

methods: {
    // 滚动事件
    handleScroll(event) {
      const dialog = event.target;
      if (dialog.scrollHeight - dialog.scrollTop === dialog.clientHeight) {
        // 当内容滑动到底部时，执行想要的操作
      }
    }
}

二、利用 Intersection Observer API 来观察底部元素是否进入可视区域

可以采用给滚动内容，在最后一个内容的 div 后面追加一个新的元素，然后 IntersectionObserver 进行观察。

HTML 代码：

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

JS 代码：

mounted() {
    this.addNewElementToTipBlank();
},
 methods: {
    addNewElementToTipBlank() {
      // 创建新元素
      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);
      }
      // 创建一个观察者实例
      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 是一个现代的浏览器 API，允许开发者在某个元素与其祖先元素或顶层文档视口发生交叉时得到通知。它非常适合实现图片懒加载、无限滚动、广告曝光率等功能。

1. 浏览器的兼容性

IntersectionObserver 目前在大多数现代浏览器中都得到了支持。但是在一些老版本的浏览器，如 IE 中，则没有支持。

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();

// 配置选项
当创建 IntersectionObserver 实例时，你可以提供一个配置对象，该对象有以下属性：
const options = {
    root: document.querySelector('.scroll-container'), // 观察目标的父元素，如果不设置，默认为浏览器视口
    rootMargin: '10px', // 增加或减少观察目标的可见区域大小
    threshold: [0, 0.25, 0.5, 0.75, 1] // 当观察目标的可见比例达到这些阈值时会触发回调函数
};
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(); // 你的加载更多内容的函数
            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: {
        // 接口返回数据
        interface() {
            this.caption = ''; // 接口返回数据
            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
            // 是在计算滚动条距离底部的距离与可视区域高度的比例。如果这个比例小于或等于 5%（0.05），则认为滚动条已经非常接近底部。
            if ((scrollHeight - (scrollTop + clientHeight)) / clientHeight <= 0.05) {
                console.log('内容到底了');
            }       
        }  
    }
</script>

结语

以上是 vue 判断内容是否滑动到底部的三种方式。如需了解更多细节，请关注码云笔记中的其他相关文章！