コンテンツにスキップ

オプション

Rolaインスタンス作成時にさまざまなオプションを設定できます。

main.js
new Rola(selector, {
// オプション
});

root

  • 型:Element | Document | null | undefined
  • デフォルト: null

IntersectionObserverroot プロパティで、ビューポートとして利用される要素です。

詳細は、交差オブザーバー API | Web API | MDN を参照してください。


rootMargin

  • 型:string |undefined
  • デフォルト: "0px"

IntersectionObserverrootMargin プロパティで、root の周りのマージンを指定します。

詳細は、交差オブザーバー API | Web API | MDN を参照してください。


threshold

  • 型:number | number[] | undefined
  • デフォルト: 0

IntersectionObserverthreshold プロパティで、ターゲットがどのくらいの割合見えてたら、IntersectionObserver のコールバックを実行するを指定します。

詳細は、交差オブザーバー API | Web API | MDN を参照してください。


once

  • 型:boolean | undefined
  • デフォルト: false

true にすると IntersectionObserver のコールバックの実行を1度だけにすることができます。


scrub

  • 型:boolean | undefined
  • デフォルト: false

true にするとスクラブ機能を有効にすることができ、ターゲット要素に --rola-progress カスタムプロパティが付与され進行度が提供されます。

カスタムプロパティ名は progressCustomPropertyName オプションで変更できます。


velocityCustomProperty

  • 型:boolean | undefined
  • デフォルト: false

true にすると、スクラブ機能有効時にスクロール速度(前回のスクロール値と現在のスクロール値の差)を、ターゲット要素に --rola-velocity カスタムプロパティによって提供されます。

カスタムプロパティ名は velocityCustomPropertyName オプションで変更できます。


progressCustomPropertyName

  • 型:string | undefined
  • デフォルト: "--rola-progress"

ターゲット要素に進行度を付与するカスタムプロパティの名前を変更できます。


velocityCustomPropertyName

  • 型:string | undefined
  • デフォルト: "--rola-velocity"

スクロール速度(前回のスクロール値と現在のスクロール値の差)を、ターゲット要素に付与するカスタムプロパティの名前を変更できます。