A ScrollingFrame は、カスタマイズ可能な キャンバス と スクロールバー （内蔵のスクロールインタラクティビティとスクロール操作のカスタマイズ方法が異なる）で構成されています。ScrollingFrame は、限られた空間に多くの情報を表示するのに理想的で、リスト と グリッド レイアウトとの相性が良い。
キャンバス
キャンバス は、他の ScrollingFrame を含めることができるGuiObjectsの主要領域です。スクロール動作は次のシナリオで自動的に調整されます:
| フレーム設定 | 結果 |
|---|---|
| フレームの CanvasSize は全体の高さよりも高く、特に合計 CanvasSize.Y が合計 Size.Y を超えています。 | 垂直スクロールが有効になり、垂直スクロールバーが表示されます。 |
| フレームの CanvasSize は全体幅よりも広く、特に合計 CanvasSize.X が合計 Size.X を超えています。 | 横スクロールが有効になり、横スクロールバーが表示されます。 |
| フレームの は または に設定され、コンテンツの合計高さ (子供 )が合計 を超えます。 | 垂直スクロールが有効になり、垂直スクロールバーが表示されます。 |
| フレームの は または に設定され、そのコンテンツの総幅 (子 ) はその総幅を超えます。 | 横スクロールが有効になり、横スクロールバーが表示されます。 |
プロパティは、フレーム内のキャンバスの現在の位置オフセットをピクセルで反映し、スクロールバーの位置をそれに応じて設定します。スクロールバーが表示されていない場合、このプロパティは何もしません。
挿入
スクロールフレームの CanvasSize は、VerticalScrollBarInset および/または HorizontalScrollBarInset プロパティに影響を受ける可能性があります。次の図の例では、縦スクロールフレームが 100% のキャンバス幅を使用しています。With VerticalScrollBarInset を None に設定して、キャンバスはスクロールフレームの全幅に拡大し、スクロールバーの下に少量のコンテンツを隠します。反対に、VerticalScrollBarInset 設定のどちらか、Always または ScrollBar 挿入は、キャンバスがスクロールバーと一致するように、ScrollBarThickness 量でキャンバスを挿入します。
スクロールバー
フレームの スクロールバー は、現在のキャンバス位置を反映し、自動ドラッグでスクロールインタラクティビティを提供します。縦スクロールバーの場合、VerticalScrollBarPosition プロパティはバーの位置を画面左または右に切り替えますが、横スクロールバーは画面下にのみ配置できます。
スクロールバーの構成は、3つのアセットプロパティで構成されています：
- TopImage — 縦スクロールバーの上部または横スクロールバーの左側に表示されます（横スクロールバーの場合、90°反時計回りで回転）。
- BottomImage — 縦スクロールバーの底または横スクロールバーの右側に表示されます（横スクロールバーの場合、90°反時計回りで回転）
各画像は、縦スクロールバーの幅または横スクロールバーの高さを変更する ScrollBarThickness プロパティに基づいてスケールします。
バーの画像アセットを着色し、それぞれの不透明度を変更する ScrollBarImageColor3 および ScrollBarImageTransparency プロパティを介して、追加の視覚修正を行うことができます。
弾性
デフォルトでは、ScrollingFrames タッチ有効のデバイスで柔軟なスクロール動作を展示し、ユーザーがキャンバスを境界より少し遠くまでドラッグでき、リリース時にキャンバスは最小または最大の制限に戻ります。完全に弾力性の動作を削除し、キャンバスが制限を超えてスクロールしないようにするには、ElasticBehavior プロパティをNeverに設定します。