重要提示：此文档不适用于您当前选择的格式stories！

amp-position-observer

描述

当用户滚动时，监控元素在视口中的位置，并分派可与其他 AMP 组件一起使用的事件。

必需脚本

<script async custom-element="amp-position-observer" src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js"></script>

支持的布局

nodisplay

用法

amp-position-observer 组件会监控用户滚动时元素在视口中的位置，并分派 enter、exit 和 scroll:<在视口中位置百分比> 事件（低信任级别），这些事件可用于触发其他组件（例如，amp-animation）的操作（仅限低信任操作）。

amp-position-observer 组件只有与其他组件一起使用时才有用，它本身不会执行任何操作。

目前，amp-animation 和 AMP 中的多个视频播放器是唯一允许低信任事件触发其操作的组件（例如，启动动画、在动画中搜索位置、暂停视频等）。

滚动绑定动画

amp-animation 组件公开了一个 seekTo 操作，该操作可以绑定到 amp-position-observer 的 scroll 事件以实现滚动绑定动画。

示例：动画在用户滚动时旋转

想象一个动画，其中时钟的时针在用户滚动页面时旋转。

<!-- An animation that rotates a clock hand 180 degrees. -->
<!--
   Note that we are NOT setting `trigger=visibility`
   since we will manually trigger the animation.
-->
<amp-animation id="clockAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "3s",
      "fill": "both",
      "direction": "alternate",
      "animations": [
        {
          "selector": "#clock-scene .clock-hand",
          "keyframes": [
            {"transform": "rotate(-180deg)"},
            {"transform": "rotate(0deg)"}
          ]
        }
      ]
    }
  </script>
</amp-animation>

<!-- The clock container -->
<div id="clock-scene">
  <!--
    Use amp-position-observer to tie the movement of the clock scene within
    the viewport to the timeline of the animation
  -->
  <amp-position-observer
    intersection-ratios="1"
    on="scroll:clockAnim.seekTo(percent=event.percent)"
    layout="nodisplay"
  >
  </amp-position-observer>
  <amp-img layout="responsive" width="2" height="1.5" src="./img/clock.jpg">
    <div class="clock-hand"></div>
  </amp-img>
</div>

基于视口中的可见性启动/暂停的动画场景

amp-animation 组件还公开了 start 和 pause 操作，可以将其绑定到 amp-position-observer 的 enter 和 exit 事件，以控制动画何时基于可见性启动/暂停。

amp-position-observer 组件公开了各种可见性配置，例如 intersection-ratios 和 viewport-margins（类似于 IntersectionObserver），可用于微调何时将目标视为可见。

示例：动画基于可见性启动和暂停

考虑相同的时钟动画，但这次手会随着时间进行动画，除非我们希望动画在时钟至少可见 50% 时开始，并在时钟的可见度小于 50% 时立即暂停。

<!-- An animation that rotates a clock hand 180 degrees. -->
<!--
   Note that we are NOT setting `trigger=visibility`
   since we will manually trigger the animation
-->
<!--
   Also note that this is the same animation as the scroll-bound version above
   the animation is the same, just the triggering mechanism with
   `amp-position-observer` is different!
-->
<amp-animation id="clockAnim" layout="nodisplay">
  <script type="application/json">
    {
      "duration": "3s",
      "fill": "both",
      "direction": "alternate",
      "animations": [
        {
          "selector": "#clock-scene .clock-hand",
          "keyframes": [
            {"transform": "rotate(-180deg)"},
            {"transform": "rotate(0deg)"}
          ]
        }
      ]
    }
  </script>
</amp-animation>

<!-- The clock container -->
<div id="clock-scene">
  <!--
    Use amp-position-observer to tie the start/pause of the animation with
    the visibility of the scene.
  -->
  <amp-position-observer
    intersection-ratios="0.5"
    on="enter:clockAnim.start;exit:clockAnim.pause"
    layout="nodisplay"
  >
  </amp-position-observer>

  <amp-img layout="responsive" width="2" height="1.5" src="./img/clock.jpg">
    <div class="clock-hand"></div>
  </amp-img>
</div>

关于滚动绑定和基于可见性的动画的辅助功能注意事项

一般来说，动画可能会给某些用户群体带来问题。特别是滚动绑定动画和视差动画，对于患有前庭障碍的用户来说可能会有问题。请务必查看 amp-animation 的辅助功能注意事项中提供的建议。

属性

target（可选）

指定要观察的元素的 ID。如果未指定，则使用 <amp-position-observer> 的父元素作为目标。

intersection-ratios（可选）

定义在 <amp-position-observer> 触发任何事件之前，目标应在视口中可见多少。该值是介于 0 和 1 之间的数字（默认为 0）。

您可以通过提供两个值（<顶部> <底部>）来为顶部与底部指定不同的比率。

`intersection-ratios="0"` 表示只要目标的单个像素进入视口就会触发 `enter`，并且只要目标的最后一个像素离开视口就会触发 `exit`。
`intersection-ratios="0.5"` 表示只要目标的 50% 进入视口就会触发 `enter`，并且只要目标的可见度小于 50% 就会触发 `exit`。
`intersection-ratios="1"` 表示当目标完全可见时会触发 `enter`，并且只要单个像素离开视口就会触发 `exit`。
`intersection-ratios="0 1"` 使条件不同，具体取决于目标是从顶部（将使用 0）还是底部（将使用 1）进入/退出。

viewport-margins（可选）

一个 px 或 vh 值，可用于缩小用于可见性计算的视口区域。没有单位的数字将假定为 px。默认为 0。

您可以通过提供两个值（<顶部> <底部>）来为顶部与底部指定不同的值。

`viewport-margins="100px"` 表示从顶部缩小视口 100px，从底部缩小视口 100px。
`viewport-margins="25vh"` 表示从顶部缩小视口 25%，从底部缩小视口 25%。实际上仅考虑视口的中间 50%。
`viewport-margins="100px 10vh"` 表示从顶部缩小视口 100px，从底部缩小视口 10%。

once（可选）

仅触发一次 enter 和 exit 事件。scroll 事件也仅执行一次迭代。

属性的存在表示 true 值，而属性的缺失表示 false 值。如果属性存在，则其值必须为空字符串、once 或未分配。

验证

请参阅 AMP 验证器规范中的 amp-position-observer 规则。

需要更多帮助？

您已经阅读本文档十几次了，但它实际上并没有涵盖您的所有问题？也许其他人也有同样的感觉：请在 Stack Overflow 上联系他们。

转到 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您对您特别关注的问题做出一次性贡献。

转到 GitHub