Vue 3教程 - 在Vue中通过Intersection Observer API来实现一些特殊功能

其实Intersection Observer API和Vue本身没有关系，是浏览器的原生API。通过这个API，可以实现类似endless scrolling的效果，或者动态展示用户处于正在浏览内容的什么位置，亦或监测某个组件是否处于可视状态。

要想在Vue中使用这个API，可以通过类似方法：

JavaScript

const isSubmitButtonVisible = ref(false)
onMounted(() => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio > 0) {
        isSubmitButtonVisible.value = true
      }
    })
  })
  document.querySelectorAll('button#btnSubmit').forEach((button) => {
    observer.observe(button)
  })
})

在view部分有对应的button：

markup

<button id="btnSubmit" type="button">
  Submit
</button>

如果想要根据btnSubmit是否可视而显示一个div的话：

markup

<div v-if="isSubmitButtonVisible">
  ...
</div>