# 滾動監聽/Scrollspy 在滾動頁面時，觸發一些事件及動畫。 ## 用法 滾動監聽組件監聽頁面滾動，并觸發基于滾動位置的事件。例如，當你向下滾動頁面時，你可以使首次出現在視窗中的一個元素觸發一個平滑淡入的動畫。只需添加帶有以下選項的 `data-uk-scrollspy` 屬性。 | Data 屬性 | 描述 | | --- | --- | | `cls:'MY-CLASS'` | 只有元素首次出現在視窗時才應用這個屬性中的class。 | | `repeat: true` | 元素每次出現在視窗中時，都應用這個類。 | | `delay:600` | 添加以毫秒為單位的動畫延遲。 | 通常，[動畫組件](animation.html)中的類與滾動監視一起搭配使用。 ### 示例 下面的例字使用了`repeat: true` 選項。向上或向下滾動可以看到被觸發的動畫效果。  ### Markup ``` <div data-uk-scrollspy="{cls:'uk-animation-fade'}">...</div> <div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">...</div> <div data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">...</div> ``` * * * ## 組 你還可以將多個需要添加滾動監聽效果的元素編成一組，這樣就不必分別為每個元素添加 data 屬性了。只需要添加 `data-uk-scollspy"{target:'MY-CLASS'}"` 屬性到容器元素，將 target 選項指向容器中你想要添加動畫效果的條目。當使用 delay(延時)時，將會為進入視野的一行條目添加逐次顯現的效果。這個延時效果會為同一組內的下一行元素滾動進入視野時重置。 ### Example  ### Example ``` <div data-uk-scrollspy="{cls:'uk-animation-fade', target:'.my-class', delay:300}"> <!-- 無延時 --> <div class="my-class">...</div> <!-- 300ms 延時 --> <div class="my-class">...</div> <!-- 600ms 延時 --> <div class="my-class">...</div> </div> ``` * * * ## JavaScript選項 這是一個如何通過屬性設置選項的示例： ``` data-uk-scrollspy="{cls:'uk-animation-fade'}" ``` | 選項 | 可用的值 | 默認值 | 描述 | | --- | --- | --- | --- | | `cls` | string | 'uk-scrollspy-inview' | 當元素出現在視口內時添加的類。 | | `initcls` | string | 'uk-scrollspy-init-inview' | 當元素首次出現在視口內時添加的類。 | | `topoffset` | integer | 0 | 在視口中觸發事件前的頂部偏移量。 | | `leftoffset` | integer | 0 | 在視口中觸發事件前的左部偏移量。 | | `repeat` | boolean | false | 元素是否每次出現在視口中都應用 `cls` 中提到的類。 | | `delay` | integer | 0 | 以毫秒為單位的延時。 | ### 事件 你可以為以下事件綁定回調函數，以實現自定義功能： | 名稱 | 描述 | | --- | --- | | `uk.scrollspy.init` | 當元素開始進入視口時觸發。 | | `uk.scrollspy.inview` | 當元素在視口中時觸發。 | | `uk.scrollspy.outview` | 當元素離開視口時觸發。 | ### 示例 ``` $('[data-uk-scrollspy]').on('uk.scrollspy.inview', function(){ // custom code... }); ``` * * * ## 滾動監聽導航/Scrollspy Nav 根據你網站滾動條的位置來自動更新所對應的導航狀態，只需添加Data屬性 `data-uk-scrollspy-nav` 到任意導航欄中。每個菜單項必須鏈接至網站中網站中對應的具有相同ID的部分。 | Data屬性 | 描述 | | --- | --- | | `data-uk-scrollspy-nav` | 觸發滾動監聽導航的功能必須的JavaScript。 | | `data-uk-scrollspy-nav="{closest:'MY-SELECTOR'}"` | 通過遍歷查找此DOM樹中最接近的節點元素進行匹配。 | | `data-uk-scrollspy-nav="{smoothscroll:true}"` | 在網頁的不同部分之間跳轉時，應用[平滑滾動組件](smooth-scroll.html)。 | | `data-uk-scrollspy-nav="{cls:'MY-CLASS'}"` | 默認地，滾動監聽導航會撥動 `uk-active` 類。使用 `cls` 選項使用你自己的類名。 | 對于滾動監聽的例子，可以查看[滾動監聽測試頁面](../tests/core/scrollspy.html)。 ### Code ``` <ul class="uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}"> <li><a href="#MY-ID">...</a></li> <li><a href="#MY-ID2">...</a></li> </ul> <div id="MY-ID">...</div> <div id="MY-ID2">...</div> ``` * * * ### JavaScript選項 這是一個如何通過屬性設置選項的示例： ``` data-uk-scrollspy-nav="{smoothscroll:true}" ``` | 選項 | 可用的值 | 默認值 | 描述 | | --- | --- | --- | --- | | `cls` | string | 'uk-active' | 添加其中的class以激活元素。 | | `closest` | CSS 選擇器 | false | 將上面所述的類，應用到本選擇器對應的元素中。 | | `topoffset` | integer | 0 | 滾動的頂部偏移量。 | | `leftoffset` | integer | 0 | 滾動的左部偏移量。 | | `smoothscroll` | boolean | false | 是否顯示平滑的滾動動畫效果。 | ### 事件 | 名稱 | 參數 | 描述 | | --- | --- | --- | | `init.uk.scrollspy` | event | 滾動監聽第一次初始化時觸發 | | `inview.uk.scrollspy` | event | 元素進入視口后觸發 | | `outview.uk.scrollspy` | event | 元素離開視口后觸發 |