スクロールスパイ

ページのスクロール中にイベントをトリガーしたり、アニメーションを実行します。

使用方法

スクロールスパイコンポーネントは、ページのスクロールを監視し、スクロール位置に基づいてイベントをトリガーします。たとえば、ページをスクロールダウンして、要素が初めてビューポートに表示されたときに、スムーズなアニメーションをトリガーして要素をフェードインさせることができます。以下のオプションを受け取る`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: セレクタ"`属性を追加し、コンテナ内でアニメーション化する項目のセレクタをターゲットにするだけです。遅延を使用する場合、ビューポートにスクロールされる項目に累積的に適用されます。

<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="クラス"`属性を追加するだけです。コンポーネントに設定されている`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`は*プライマリ*オプションであり、属性値にオプションが1つしかない場合は、そのキーを省略できます。

<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`	overflowがtrueに設定されている場合、ナビゲーションの上または下にある最初のまたは最後の項目はアクティブなままになります。
`offset`	数値	`0`	スクロールトップに追加されるオフセット。