Skip to page content

Scroll Fire Directive

Scroll Fire 是一个指令,当应用它的 DOM 元素(或组件)进入视野时,允许调用一个方法(一次且仅一次)。

该元素是通过与 Intersection 指令同一个共享的 IntersectionObserver 来观察的,因此没有滚动监听器,在没有任何变化时也不产生开销。"进入视野"意味着用户确实能看到它:滚动容器和整个页面都会被纳入考虑,并且当元素在没有发生滚动的情况下变为可见时(例如布局变化、尺寸调整、其上方的内容折叠),该方法同样会触发。

用法

Basic



阈值
v2.30+

默认情况下,只要元素的任意一部分变为可见,该方法就会触发。可以把元素必须可见的比例(0 到 1 之间)作为指令的参数传入:

<!-- 当元素一半可见时触发一次 -->
<div v-scroll-fire:0.5="handler" />

<!-- 只有当元素完全可见时才触发一次 -->
<div v-scroll-fire:1="handler" />
WARNING

比一次能显示的高度还要高的元素永远不会完全可见,因此阈值 1 对它永远不会触发。对这类元素请使用更低的阈值。

禁用与重新武装

赋值 undefined 可禁用该指令。由于该方法只触发一次,在它触发之后再赋一个新函数并不会再次触发;请先禁用它(undefined),然后再赋值函数以重新武装它。