問題の概要

ScrollViewの中にNodeというUIオブジェクトを複数配置
それに対応する線（ConnectionLine）を別Canvasで表示
解像度によってNodeと線の位置がズレる
iPad等で右にスクロールしきれない現象も発生

初期状態の構成

ScrollView > Viewport > Content（Nodeの親）
Node：middle leftのAnchor
ConnectionLineの親Canvas：stretch stretch

この状態だと、Scroll量とUIの位置計算が一致しないためズレが発生します。

修正のステップ

Anchorの統一

NodeとConnectionLineの描画基準を揃えるため、Anchorを両方ともmiddle leftに設定。

RectTransform nodeContent = ...; // middle left
RectTransform connectionParent = ...; // 元は stretch → middle left に変更

これにより、線とノードの中心が一致するようになります。

コンテナ幅の動的調整

右にスクロールしきれない問題は、Contentの横幅が足りていなかったのが原因。

float requiredWidth = nodeCount * (nodeSpacing + nodeWidth);
contentRectTransform.sizeDelta = new Vector2(requiredWidth, contentRectTransform.sizeDelta.y);

Coroutineで1フレーム待つ

Start()で設定しても反映されないことがあったため、レイアウト確定後に調整。

IEnumerator Start() {
    yield return null; // レイアウト確定を1フレーム待つ
    AdjustContainerWidth();
}

最終的なポイントまとめ

Nodeと線のAnchorを middle left に統一

ScrollViewのContentサイズを動的に調整

サイズ調整は Coroutineで1フレーム待つ

最後に

ブログでもUnityや個人開発ネタを発信中です！
開発ノウハウやアプリ制作過程、Unity連携系のハマりポイントなど
より深掘りした内容をブログにまとめています。
▶ https://syunpp.com

公開中のアプリ一覧はこちら！
実際にUnityで開発してリリース済みのアプリ一覧をまとめています。
▶ https://syunpp.com/公開中のアプリ一覧/