Intersection Observer API的出现,让开发无限滚动组件变得更加简单方便。 Intersection Observer API Intersection Observer API提供了一个可订阅的模型,可以观察该模型,以便在元素进入视口时得到通知。 创建一个观察者实例很简单,我们只需要创建一个IntersectionObserver的新实例并调用observe方法,传递一个DOM元素: const observ...
//观察器对象//包含 被观察对象的父容器 root 容器外边距 rootMargin 以及被观察者出现在观察者显示的大小 thresholdletoptions = {root:document.querySelector('#scrollArea'),rootMargin:'0px',threshold:1.0} //观察者实例letobserver =newIntersectionObserver(callback, options); // 节流exportfunctiondebounce<F...
this.observer = new IntersectionObserver(([entry]) => { if (entry && entry.isIntersecting) { // ... } }) this.observer.observe(this.$el) } } 正如你所见,我们使用this.$el作为root元素以便观察DOM元素。 为了使其可重用,我们需要让父组件(使用Observer组件的组件)处理交叉的事件。为此,我们在它相...
Intersection Observer API提供了一个可订阅的模型,可以观察该模型,以便在元素进入视窗时得到通知。 创建一个观察者实例很简单,我们只需要创建一个IntersectionObserve的新实例并调用observe方法,传递一个DOM元素: const observer = new IntersectionObserver() const coolElement = document.querySelector('#coolElement') ...