跳至主要内容

文档

滚动侦测

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

用法

滚动侦测组件监听页面滚动，并根据滚动位置触发事件。例如，如果您向下滚动页面，并且元素首次出现在视窗中，您可以触发一个平滑动画来淡入元素。只需添加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 将滚动组件添加到其链接中。
overflow 布尔值 true 如果溢出设置为 true，则第一个或最后一个项目将在导航上方或下方时保持活动状态。
offset 数字 0 添加到滚动顶部的偏移量。

滚动侦测导航 JavaScript

了解更多关于JavaScript 组件。

滚动侦测导航初始化

UIkit.scrollspyNav(element, options);

滚动侦测导航事件

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

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