UIkit3.x文档

滚动监听

在滚动页面时触发事件并动画。.

用法

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

通常Animation 组件 都和滚动监听组件搭配使用。

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

  • Left

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Right

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <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>

这个示例使用了repeat: true 选项。上下滚动页面可查看触发的动画。这里的布局用到了 Card 组件。

组

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

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

  • Fade

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Fade

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Fade

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Fade

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Fade

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Fade

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <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" 属性添加到目标元素即可。它将覆盖组件上设置的clscls 选项。

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

  • Bottom

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Top

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Bottom

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • <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>

组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 了解更多

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

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

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

JavaScript

了解更多关于 JavaScript 组件的内容。

初始化

UIkit.scrollspy(element, options);

事件

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

Name Description
inview 元素进入视口后触发
outview 元素离开视口后触发

滚动监听导航

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

<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 属性。用分号分隔多个选项。

滚动监听导航选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。了解更多。

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

滚动监听导航的JavaScript

了解更多关于 JavaScript 组件的内容。

滚动监听导航初始化

UIkit.scrollspyNav(element, options);

滚动监听导航的事件

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

Name Description
active 项目变为活动状态后触发。