Scroll Appear

要素が画面に入ることで表示されるようにします。

Options

const radix = new Radix({
    scrollAppear: {
        active: true,  // 機能のオン、オフ（boolean）
        selector: '.radix-appear',  // スクロール表示する要素（CSSセレクタ）
        delay: 200,  // 表示するまでの遅延（ミリ秒）
        reset: true,  // 一度表示した後非表示にするか（boolean）
        class: 'active'   // 追加するクラス（string）
    }
});

デフォルトでは、 radix-appear クラスをつけた要素をスクロール表示要素にします。

reset を true にすると、画面内に入った要素が画面外に出た際に非表示に戻します。 false だと一度表示された後は消えません。

delay, reset, class のオプション項目は要素の dataset を通じて、それぞれ一つ一つに変更することができます。これは同じページ内で異なる設定での scrollAppear の利用を可能にします。

dataset でのオプション設定には、 data-apepar-{optionName} となるように名前をつなげて設定します。詳細は下記 Example を参照してください。

Usage and Example

この機能は position: fixed の要素に対応する為の修正モードが存在します。

radix-appear で指定した要素に data-appear-fixed 属性を持たせて整数値を与えた場合、その要素は fixed された要素であると考え、要素の場所ではなく画面のスクロール量を基準に判定します。

<a href="#" class="pagetop radix-appear" data-appear-fixed="300" data-appear-delay="0"><span class="radix-icon">angle_top</span></a>

これはこのページのフッターのページトップボタンの記述です。動作結果についてはこのページで確認して下さい。

次の画像は標準設定で scrollAppear を利用した場合のデモです。もしこの要素が最初から画面に入ってしまっていてページのスクロールが発生していない場合は、ブラウザの大きさを調整してページにスクロールが発生するように調整してみてください。