UIkit3.x文档

滚动监听

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

用法

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

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

<div uk-scrollspy="cls:uk-animation-fade"></div>
  • <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>
  • <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>
  • <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 项目变为活动状态后触发。