滚动监听／Scrollspy

# 滚动监听／Scrollspy

<p class="uk-text-lead">在滚动页面时触发事件和动画。</p>

## Usage-用法

滚动监听组件监听页面滚动并根据滚动位置触发事件。例如，如果在向下滚动页面时，某个元素首次出现在视口中，则可以为该元素触发平滑淡入动画。只需添加以下选项的 `uk-scrollspy` 属性即可。

通常 [Animation 组件](animation.md) 都和滚动监听组件搭配使用。

```html
<div uk-scrollspy="cls:uk-animation-fade"></div>
```

```example
<div class="uk-child-width-1-2@m uk-grid-match" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-left; repeat: true">
            <h3 class="uk-card-title">Left</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
            <h3 class="uk-card-title">Right</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>
```

T这个示例使用了 `repeat: true` 选项。上下滚动页面可查看触发的动画。这里的布局用到了 [Card 组件](card.md)。

***

## Groups-组

您还可以奖多个需要添加滚动监听的元素编成一组，这样就无需对每个元素都应用该属性。只需将 `uk-scrollspy="target: SELECTOR"` 属性添加到容器元素中，将 target 选项指向容器中你想要添加动画效果的元素。当使用delay(延时)时，将会为进入视野的一行条目添加逐次显现的效果。

```html
<div uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 500">
    <div></div>
    <div></div>
</div>
```

```example
<div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: .uk-card; delay: 500; repeat: true">
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Fade</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>
```

***

## 为每个目标设置 `cls` 选项

你也可以给每个目标设置单独的 `cls` 选项。只需将 `uk-scrollspy-class="CLASS"` 属性添加到目标元素即可。它将覆盖组件上设置的 `cls` 选项。

```html
<div uk-scrollspy="target: > div; cls: uk-animation-fade; delay: 500">
    <div uk-scrollspy-class="uk-animation-slide-top"></div>
    <div uk-scrollspy-class="uk-animation-slide-bottom"></div>
</div>
```

```example
<div class="uk-child-width-1-3@m" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: .uk-card; delay: 300; repeat: true">
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Bottom</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
            <h3 class="uk-card-title">Top</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div>
        <div class="uk-card uk-card-default uk-card-body">
            <h3 class="uk-card-title">Bottom</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>
```

***

## Component options-组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项          | 可用值    | 默认值   | 描述                             |
|:--------------|:--------|:--------|:-------------------------------|
| `cls`         | String  | ``      | 元素在视野内时添加的class。如果要添加两个，用逗号隔开  |
| `hidden`      | Boolean | `true`  | 在元素离开视口时隐藏元素                   |
| `offset-top`  | Number  | `0`     | 在视口中触发事件前的顶部偏移量                |
| `offset-left` | Number  | `0`     | 在视口中触发事件前的左侧偏移量                |
| `repeat`      | Boolean | `false` | 是否在元素每次进入视野时都添加 `cls` 中的 class |
| `delay`       | Number  | `0`     | 延迟时间（毫秒）                       |

`cls` 是 _Primary_ 选项，如果它是属性值中的唯一选项，则可以省略它的键。

```html
<span uk-scrollspy="my-class"></span>
```

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

```js
UIkit.scrollspy(element, options);
```

### 事件

将在附加了此组件的元素上触发以下事件：

| Name      | 描述        |
|:----------|:----------|
| `inview`  | 元素进入视口后触发 |
| `outview` | 元素离开视口后触发 |

***

## Scrollspy nav-滚动监听导航

要根据站点的滚动位置自动更新导航内对应菜单项的活动状态，请将 `uk-scrollspy-nav` 属性添加到导航菜单。每个菜单项都必须链接到页面内对应部分位置的ID。

```html
<ul class="uk-nav uk-nav-default" uk-scrollspy-nav="closest: li; scroll: true">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>
```

有关滚动监听导航的示例，可以查看本页面右侧的固定导航效果或查看测试页。以下任何选项都可以应用 `uk-scrollspy-nav` 属性。用分号分隔多个选项。

***

### 滚动监听导航选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项         | 可用值     | 默认值                        | 描述                             |
|:-----------|:--------|:---------------------------|:-------------------------------------------------------------|
| `cls`      | String  | `uk-active`                | 添加到活动链接上的 class                                        |
| `closest`  | String  | `uk-scrollspy-init-inview` | 将上面所述的 class，应用到本选择器对应的目标元素中。  |
| `scroll`   | Boolean | `false`                    | 在链接上添加使用 [Scroll 组件](scroll.md)                       |
| `overflow` | Boolean | `true`                     | 如果将overflow设置为true，页面滚动到顶部或底部时，则位于导航上方或下方的第一个或最后一个元素将保持活动状态。|
| `offset`   | Number  | `0`                        | 滚动到顶部时添加像素偏移量。    | 

***

### 滚动监听导航的JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 滚动监听导航初始化

```js
UIkit.scrollspyNav(element, options);
```

### 滚动监听导航的事件

附加此组件的元素将触发以下事件：

| Name     | 描述           |
|:---------|:-------------|
| `active` | 项目变为活动状态后触发。 |