跳过主要内容

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()方法,这个方法在性能上稍微更节省一些。

演示

加载中...

无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗