API¶

Constructor¶

const ScrollEffectModule = new SCROLL_EFFECT_MODULE(options);

options には監視対象、判定位置、付与クラス、コールバックなどを指定できます。指定しなかった項目はデフォルト値で動作します。

Options¶

Option	Type	Default	Description
`target`	`string`	`'[data-scroll]'`	監視対象のセレクターです。複数指定する場合は `'.item, [data-scroll]'` のように指定します。
`targetDataName`	`string`	`'[data-scroll-name]'`	コールバックの第3引数として渡すdata属性のセレクターです。
`parent`	`string`	`'window'`	スクロールを監視する親要素です。通常は `window` のまま使用します。
`body`	`string`	`'body'`	ページ末尾の判定に使う要素です。
`classNameInview`	`string`	`'is-scroll-active'`	対象要素が表示判定に入った時に付与するクラス名です。
`ratio`	`number`	`0.8`	表示判定位置です。ウィンドウ高さを `1` として、上から何割の位置で判定するかを指定します。
`ratioReverse`	`number \\| null`	`null`	戻り方向の判定位置です。未指定の場合は `ratio` と同じ値になります。
`reverse`	`boolean`	`false`	`true` の場合、戻り方向で判定位置の外に出た要素からクラスを削除します。
`firstDelay`	`number`	`100`	初回実行までの遅延時間です。単位はミリ秒です。
`autoStart`	`boolean`	`true`	`true` の場合、インスタンス作成後に自動で初期化と監視を開始します。
`autoStartType`	`'ready' \\| 'load' \\| 'scroll'`	`'ready'`	自動開始のタイミングです。
`throttleInterval`	`number`	`5`	スクロール処理の間引き間隔です。単位はミリ秒です。
`updateResizeAuto`	`boolean`	`true`	`true` の場合、横幅が変わったリサイズ時に位置情報を再取得します。
`customVarNameRatio`	`string \\| null`	`null`	指定したCSSカスタムプロパティに、要素ごとのスクロール比率を設定します。
`on.Scroll`	`function \\| null`	`null`	スクロール時に実行されるコールバックです。
`on.Change`	`function \\| null`	`null`	対象要素の表示状態が変わった時に実行されるコールバックです。
`on.In`	`function \\| null`	`null`	対象要素が表示判定に入った時に実行されるコールバックです。
`on.Out`	`function \\| null`	`null`	`reverse: true` の時、対象要素が表示判定から外れた場合に実行されるコールバックです。

Option Example¶

const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
  target             : '[data-scroll]',
  targetDataName     : '[data-scroll-name]',
  classNameInview    : 'is-scroll-active',
  ratio              : 0.8,
  ratioReverse       : 1,
  reverse            : true,
  firstDelay         : 100,
  autoStart          : true,
  autoStartType      : 'ready',
  throttleInterval   : 5,
  updateResizeAuto   : true,
  customVarNameRatio : '--scroll-ratio',
  on: {
    Scroll: function(scrollTop){
      console.log('Scroll', scrollTop);
    },
    Change: function(item, index, name){
      console.log('Change', item, index, name);
    },
    In: function(item, index, name){
      console.log('In', item, index, name);
    },
    Out: function(item, index, name){
      console.log('Out', item, index, name);
    },
  },
});

Callbacks¶

Scroll¶

Scroll: function(scrollTop){
  console.log(scrollTop);
}

現在のスクロール位置が渡されます。

Change / In / Out¶

In: function(item, index, name){
  console.log(item, index, name);
}

Argument	Description
`item`	対象要素の状態オブジェクトです。
`index`	対象要素の連番です。
`name`	`targetDataName` で指定したdata属性の値です。

item には対象DOM、位置、サイズ、カウント、data属性などが含まれます。

{
  el      : element,
  index   : 1,
  pos     : 320,
  height  : 120,
  height2 : 120,
  count   : 1,
  active  : true,
  dataset : element.dataset,
}

Methods¶

`Start()`¶

監視を開始します。内部では一度 Stop() してから、対象要素の位置情報を更新します。

ScrollEffectModule.Start();

`Stop()`¶

監視状態を停止し、対象要素から classNameInview のクラスを削除します。

ScrollEffectModule.Stop();

`Update()`¶

対象要素や位置情報を再取得します。 DOMを追加、削除、移動した後に使用します。

ScrollEffectModule.Update();

CSS Variable Sample¶

customVarNameRatio を指定すると、対象要素へスクロール比率のCSSカスタムプロパティを設定できます。

new SCROLL_EFFECT_MODULE({
  target             : '[data-scroll]',
  customVarNameRatio : '--scroll-ratio',
});

[data-scroll] {
  opacity: var(--scroll-ratio);
}