ScrollTrigger.positionInViewport
ScrollTrigger.positionInViewport( element:Element | String, referencePoint:String | Number, horizontal:Boolean ) : Number
返回一个归一化的值,表示元素相对于视口的位置,其中0表示在视口顶部,0.5表示在中间,1表示在底部。例如,如果元素的顶部在视口顶部下方80%,则以下代码将返回0.8:ScrollTrigger.positionInViewport(element, "top");
参数
元素: 元素 | 字符串
元素或选择器文本
referencePoint:字符串 | 数字
要从中测量的元素上的参考点,例如 "center" 或 "top" 或 "bottom",或者你可以使用一个数字表示从顶部/左侧有多少像素,因此 20 表示从元素顶部向下 20 像素。
horizontal:布尔值
默认情况下测量的是垂直位置,但要更改为水平模式,请将 horizontal 设置为
true
细节
返回一个标准化值,表示元素相对于视口的位置,其中 0 在视口顶部,0.5 在中间,1 在底部。
ScrollTrigger.positionInViewport(element);
默认情况下它使用元素的中心作为参考点,但你可以通过第二个参数控制这一点。可以使用像"center"
(默认),"top"
,或者"bottom"
这样的关键字。或者你可以使用从元素顶部开始的像素数,因此20
将使参考点位于元素顶部向下 20 像素处。例如,如果元素顶部距离视口顶部有 80% 的位置,则以下代码将返回 0.8:
ScrollTrigger.positionInViewport(element, "top");
对于参考点(第二个参数),
默认情况下使用的是垂直方向的测量值,但如果想要切换到水平方向,可以将第三个参数设置为true
:
// horizontal mode
ScrollTrigger.positionInViewport(element, "center", true);
如果你只是想检查元素是否在视口中(布尔值),请查看ScrollTrigger.isInViewport()方法,这个方法在性能上稍微更节省一些。