跳到主要内容

文档

滚动侦测

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

用法

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

通常，动画组件中的类会与滚动侦测组件一起使用。

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

左侧

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

右侧

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 选项。向上和向下滚动以查看触发的动画。布局是使用 卡片组件 制成的。

分组

您还可以对滚动侦测元素进行分组，这样您就不必将该属性应用于每个元素。只需将 uk-scrollspy="target: SELECTOR" 属性添加到容器元素，即可定位要容器内动画的项目的选择器。当使用延迟时，它将累积应用于滚动到视图中的项目。

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

淡入

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

淡入

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

淡入

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

淡入

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

淡入

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

淡入

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>

底部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

顶部

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

底部

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 字符串 当元素进入/离开视口时切换的类。
target 布尔值、CSS 选择器 false 应用滚动侦测的目标。默认为元素本身。
hidden 布尔值 true 在超出视图时隐藏元素。
margin 字符串 -1px 在计算与元素的交集之前，将边距添加到视口的边界框。该值必须以 px 或 % 为单位。
repeat 布尔值 false 每次元素在视图中时都会应用 cls 类。
delay 数字 0 以毫秒为单位的延迟时间。

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

<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 字符串 uk-active 要添加到活动链接的类。
closest 布尔值、CSS 选择器 false 要应用该类的目标。默认为元素本身。
scroll 布尔值 false 将其 滚动组件 添加到其链接。
target CSS 选择器 a[href] 定位应使用的锚元素。
offset 数字 0 添加到滚动顶部的偏移量。

滚动侦测导航 JavaScript

了解有关 JavaScript 组件 的更多信息。

滚动侦测导航初始化

UIkit.scrollspyNav(element, options);

滚动侦测导航事件

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

名称 描述
active 在项目变为活动状态后触发。