.getData()

計算後のデータを返します。 大体は、インスタンス生成時に使われたパース済みのdataを返します。.calculate()を呼び出すと、dataが変更される場合があります。

instance.getData()

戻り値

object

パースされたdata。

デモ

「data表示」ボタンを押すと、dataをconsole.logに出力します。
「下に移動」ボタンまたは「上に移動」ボタンで要素の位置を変更し、 「位置を再計算」ボタンを押した後に「data表示」ボタンを押すと、 計算後のdataが表示されます。

JavaScript

const instance = basicScroll.create({
  elem: document.getElementById('element'),
  from: 'top-top',
  to: 'bottom-bottom',
  props: {
    '--opacity': {
      from: 0,
      to: 1
    }
  }
});
instance.start();

document.querySelector('.up').addEventListener('click', function () {
  let posiTop = parseInt(document.getElementById('element').style.top, 10);
  posiTop -= 40;
  document.getElementById('element').style.top = posiTop + 'px';
});
document.querySelector('.down').addEventListener('click', function () {
  let posiTop = parseInt(document.getElementById('element').style.top, 10);
  posiTop += 40;
  document.getElementById('element').style.top = posiTop + 'px';
});
document.querySelector('.calculate').addEventListener('click', function () {
  instance.calculate();
});
document.querySelector('.getdata').addEventListener('click', function () {
  console.log(instance.getData());
});

CSS

#element {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 60px 0;

  opacity: var(--opacity);
  will-change: opacity;
}

HTML

<button class="down">下に移動</button>
<button class="up">上に移動</button>
<button class="calculate">位置を再計算</button>
<button class="getdata">data表示</button>
<div id="element" style="top:0px;"></div>