重要事項：此文件不適用於您目前選取的格式 電子郵件！

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:<Position In Viewport As a Percentage> 事件 (低信任等級)，這些事件可用於觸發其他元件 (例如 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)。

您可以透過提供兩個值 (<top> <bottom>) 來指定頂部與底部的不同比率。

`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。

您可以透過提供兩個值 (<top> <bottom>) 來指定頂部與底部的不同值。

`viewport-margins="100px"` 表示從頂部和底部將可視區域縮小 100 像素。
`viewport-margins="25vh"` 表示從頂部和底部將可視區域縮小 25%。實際上僅考慮可視區域的中間 50%。
`viewport-margins="100px 10vh"` 表示從頂部將可視區域縮小 100 像素，從底部縮小 10%。

once (選填)

僅觸發一次 enter 和 exit 事件。scroll 事件也只會執行一次迭代。

屬性的存在表示 true 值，而屬性的不存在表示 false 值。如果屬性存在，則其值必須為空字串、once 或未指定。

驗證

請參閱 AMP 驗證器規格中的 amp-position-observer 規則。

需要更多協助嗎？

您已閱讀此文件十幾次，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有相同的感受：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性貢獻。

前往 GitHub