WebGL オブジェクトと DOM 要素の位置を同期した際、モバイルデバイスのネイティブスクロールで両者の位置がずれることがある。2025年4月4日に Lusion が公表した投稿によると、Canvas を ページコンテンツに追従させ、Canvas の位置を translateY で補正することで、このずれを解消できるという。この効果を確認すべく、デモを作成した。なお、この方法を理解する上で、長谷川巧さん（@_unshift）の図解を大いに参考にした。

Demo: https://koji014-webgl-scroll-sync.vercel.app

以下、上から順に（1）固定していない状態、（2）固定して Padding をつけていない状態、（3）固定して Padding をつけた状態。（2）の Padding をつけない場合、上へ戻ろうとする際に Canvas が見切れている（画像の表示が欠けている）ことがわかる。（3）では Padding をつけることで、これが改善されている。

参考

• “Solution” to Connect WebGL Visuals to Multiple DOM Elements with One Canvas - Without Scroll-Jacking
• 長谷川巧さんの図解

同期していた DOM と板ポリゴンの関係を非同期遷移前に破棄し、遷移後に再び同期する。

WebGL School プラスワン講義回で Taro Yoshimura さん（@ysmrt6）が解説した内容を参考に、Three.js を使わずに実装した。

Demo: https://koji014-dom-gl-sync.vercel.app

参考

• WebGL School 2024 プラスワン講義回 Taro Yoshimura さんの Three.js を用いた実装