跳到主要内容

文档

Scrollspy

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

用法

Scrollspy（滚动监听）组件监听页面滚动，并根据滚动位置触发事件。例如，当你向下滚动页面，某个元素第一次出现在视口中时，可以触发一段平滑动画让该元素淡入。只需添加 uk-scrollspy 属性，它支持以下选项。

通常会将 Animation 组件 中的类与 Scrollspy 组件配合使用。

<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" 属性，选择器指向容器内希望添加动画的项目。使用延迟时，延迟会按顺序累加到滚动进入视野的项目上。

<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" 属性。它会覆盖组件上设置的 cls 选项。

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

组件选项

这些选项都可以通过组件属性传入。多个选项之间用分号分隔。了解更多

选项 值 默认值 说明
cls String 元素进入或离开视口时要切换的类。
target Boolean, CSS selector false 应用滚动监听的目标。默认为元素自身。
hidden Boolean true 元素不在视野内时将其隐藏。
margin String -1px 在计算与元素的交集之前，先加到视口边界框上的外边距。值必须使用 px 或 % 单位。
repeat Boolean false 每次元素进入视野时都应用 cls 类。
delay Number 0 延迟时间，单位为 ms。

cls 是 Primary 选项，当属性值中只有这一个选项时，可以省略它的键名。

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

JavaScript

进一步了解 JavaScript 组件。

初始化

UIkit.scrollspy(element, options);

事件

以下事件会在绑定了该组件的元素上触发：

名称 说明
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 属性上。多个选项之间用分号分隔。

滚动监听导航选项

这些选项都可以通过组件属性传入。多个选项之间用分号分隔。了解更多

选项 值 默认值 说明
cls String uk-active 要添加到激活链接上的类。
closest Boolean, CSS selector false 应用该类的目标。默认为元素自身。
scroll Boolean false 为其链接添加 Scroll 组件。
target CSS selector a[href] 指定应使用的锚点元素。
offset Number 0 添加到滚动顶部的偏移量。

滚动监听导航 JavaScript

进一步了解 JavaScript 组件。

滚动监听导航初始化

UIkit.scrollspyNav(element, options);

滚动监听导航事件

以下事件会在绑定了该组件的元素上触发：

名称 说明
active 项目变为激活状态后触发。