Wix Studio(Velo)におけるスクロール検知

Introduction

Wixは10年前くらいに見て以降全く触れてこなかったのですが、
その理由はノーコード過ぎてやりたいことができないことが多かった、という点が挙げられます。

その後STUDIOが出て、
周りに「コーディング力は無いけどノーコードならやってみる！」という人も増えてきたので、
サポートがてら触っていました。
STUDIOがカスタムコードをリリースしたのがつい最近で、
かつ有料プランでないと使えないということで、
無料で試せるものがないかと改めて探していました。

するとWixでいつの間にか[Velo by Wix])https://ja.wix.com/velo)とかWix Studioがリリースされていることを知りまして、
だいぶ柔軟性が出てきたので色々弄ってみているところです。

Wixのカスタムコード

Wix Studioで作成したサイトには、Veloが連携できるようになっていて、Javascriptで処理がかけるようでした。
ただし、Velo ReferenceにあるAPIのみ対応となっており、windowやdocumentなどのオブジェクトは隠蔽されており、DOMツリーでの柔軟な操作ができないようです。

スクロール検知

スクロールに応じてアニメーションを施すこと自体はWix Studio(以降、ノーコードでのデザインをこのように呼称します)内で出来ます。

具体的な例として「スクロールすると、デザインを起点に(またはデザインに向かって)、フェードする」のような設定ができます。これは、画面下部は透過、画面の中央に向かってスクロールするにつれ、透過度が減少していくアニメーションです。
このようにスクロールの量とアニメーションのFrom-Toが連動している形であれば、Wix Studio内で設定可能になります。

一方で、「スクロールを開始したらアニメーションする」のようなケースはWix Studioにおいては設定できないため、Velo(Wix Studio内でのコード記述をこのように呼称します)にて処理を記述する必要があります（※より良い方法があれば教えてください）。

前述の通りJavascriptを自由に記述することはできないので、IntersectionObserverが使えません。幸いwix-window-frontendモジュールにgetBoundingRect - Velo API Reference - Wix.comがあり、setIntervalやsetTimeoutも使えるので以下の様にしてスクロールを検知することができます。

import wixWindowFrontend from 'wix-window-frontend'

$w.onReady(() => {
  let scrollY = 0
  // 0.1s毎に処理を実行する
  setInterval(() => {
    // BoundingRectを取得する
    wixWindowFrontend.getBoundingRect()
    .then((windowSizeInfo) => {
      // 保持しているスクロール量から変化があった場合に変数更新する
      if (scrollY !== windowSizeInfo.scroll.y) {
        scrollY = windowSizeInfo.scroll.y
	// ToDo: handleScroll()等のスクロールハンドリングを行う
      }
    })
  }, 100)
})

Conclusion

Webデザインの中で必要になる「動き」については、Wix Studio内のGUIと当該コードで充分に実現できそうな雰囲気がありましたが、他に出てきそうだったら加筆しようと思います。
今のところWixでシンプルなホームページの実装しか行っていないので、その他プリセットされた機能も触ってみたいですね。