vue中判断元素是否进入“视口“

1.获取DOM位置，手动判断domRect = element.getBoundingClientRect();DOMRect 它是包含整个元素的最小矩形，包括其填充和边框宽度。2.使用useIntersectionObserver()作用 : 就是依靠h5的直接判断元素进入可视区域的比例来实现监听进入可视区域行为使用方法 :1.下载@vueuse/corenpm i @vueuse/core2.

哈利路亚_

2431人浏览 · 2021-09-22 09:36:04

哈利路亚_ · 2021-09-22 09:36:04 发布

1.获取DOM位置，手动判断

domRect = element.getBoundingClientRect();

DOMRect 它是包含整个元素的最小矩形，包括其填充和边框宽度。

2.使用useIntersectionObserver()

作用 : 就是依靠h5的直接判断元素进入可视区域的比例来实现监听进入可视区域行为

使用方法 :

1.下载@vueuse/core

npm i @vueuse/core

2.使用useIntersectionObserver方法

const { stop } = useIntersectionObserver(
  target, 
  ([{ isIntersecting }], observerElement) => {
    // 在此处可根据isIntersecting来判断，然后做业务
  },
  {
      threshold: 0
  }
)

stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）

target 是vue的对象引用,是观察的目标

isIntersecting 是一个boolean值，表示是否进入可视区域。

observerElement 被观察的dom

threshold 容器和可视区交叉的占比（进入的面积/容器完整面积）取值，0-1 之间，默认是0.1，