يتكون ScrollingFrame من لوحة قماشية قابلة للتخصيص و شريط تمرير مع تفاعل تمرير مدمج وطرق مختلفة لتخصيص كيفية عمل التمرير. ScrollingFrame مثالية لعرض الكثير من المعلومات في مساحة محصورة وتعمل بشكل جيد مع تخطيطات القائمة و الشبكة.
اللوحة القماشية
اللوحة القماشية هي المنطقة الرئيسية لـ ScrollingFrame التي يمكن أن تحتوي على GuiObjects أخرى. يتكيف سلوك التمرير تلقائيًا في السيناريوهات التالية:
| إعداد الإطار | النتيجة |
|---|---|
| حجم لوح الإطار CanvasSize أطول من ارتفاعه الإجمالي؛ تحديدًا إجمالي CanvasSize.Y يتجاوز إجمالي Size.Y. | يتم تمكين التمرير العمودي ويظهر شريط تمرير عمودي. |
| حجم لوح الإطار CanvasSize أوسع من عرضه الإجمالي؛ تحديدًا إجمالي CanvasSize.X يتجاوز إجمالي Size.X. | يتم تمكين التمرير الأفقي ويظهر شريط تمرير أفقي. |
| تم تعيين AutomaticCanvasSize للإطار إلى Y أو XY وإجمالي ارتفاع محتوياته (الأطفال GuiObjects) يتجاوز إجمالي Size.Y. | يتم تمكين التمرير العمودي ويظهر شريط تمرير عمودي. |
| تم تعيين AutomaticCanvasSize للإطار إلى X أو XY وإجمالي عرض محتوياته (الأطفال GuiObjects) يتجاوز إجمالي Size.X. | يتم تمكين التمرير الأفقي ويظهر شريط تمرير أفقي. |
تعكس خاصية CanvasPosition الإزاحة الموضعية الحالية للوحة القماشية داخل الإطار، بالبكسل، وتحدد موضع أشرطة التمرير وفقًا لذلك. لاحظ أن هذه الخاصية لا تفعل أي شيء إذا لم تكن أشرطة التمرير مرئية.
الإزاحات
يمكن أن يتأثر CanvasSize لإطار التمرير بـ VerticalScrollBarInset و/أو HorizontalScrollBarInset. في الرسم البياني المثال التالي، يستخدم إطار التمرير العمودي عرض لوحة قماشية بنسبة 100%. مع تعيين VerticalScrollBarInset إلى None (افتراضي)، تمتد اللوحة القماشية لتصل إلى العرض الكامل لإطار التمرير، مما يحجب كمية ضئيلة من المحتوى تحت شريط التمرير. على النقيض من ذلك، فإن تعيين VerticalScrollBarInset إلى Always أو ScrollBar يقوم بإزاحة اللوحة القماشية بمقدار ScrollBarThickness بحيث تلتقي اللوحة القماشية الحافة بالحافة مع شريط التمرير.
أشرطة التمرير
تعكس أشرطة التمرير في الإطار الموضع الحالي للوحة القماشية وتوفر تفاعل سحب تلقائي للتمرير. بالنسبة لأشرطة التمرير العمودية، تقوم خاصية VerticalScrollBarPosition بتبديل موضع الشريط إلى اليسار أو اليمين من اللوحة القماشية، ولكن يمكن وضع أشرطة التمرير الأفقي فقط أسفل اللوحة القماشية.
يتكون تشييد شريط التمرير من ثلاث خصائص أصولية:
- TopImage — يظهر في أعلى شريط تمرير عمودي، أو إلى اليسار من شريط تمرير أفقي (مُدوّر 90° لجهة عكس عقارب الساعة لشريط تمرير أفقي).
- MidImage — يمتد عبر المنطقة بين TopImage و BottomImage (مُدوّر 90° لجهة عكس عقارب الساعة لشريط تمرير أفقي).
- BottomImage — يظهر في أسفل شريط تمرير عمودي، أو إلى اليمين من شريط تمرير أفقي (مُدوّر 90° لجهة عكس عقارب الساعة لشريط تمرير أفقي).
يتناسب كل صورة بناءً على خاصية ScrollBarThickness التي تغير عرض شريط التمرير العمودي أو ارتفاع شريط التمرير الأفقي.
يمكن إجراء تعديلات بصرية إضافية من خلال خاصيتي ScrollBarImageColor3 و ScrollBarImageTransparency اللتين تصبغتا أصول صورة الشريط وتعدلا شفافيتها، على التوالي.
المرونة
بشكل افتراضي، تتمتع ScrollingFrames بسلوك التمرير المرن على الأجهزة التي تدعم اللمس، مما يعني أنه يمكن للمستخدمين سحب اللوحة القماشية قليلاً أبعد من حدودها وعند الإفراج، سيراود اللوحة القماشية إلى حدها الأدنى أو الأقصى. إذا كنت ترغب في إزالة السلوك المرن تمامًا وضمان عدم تمرير اللوحة القماشية إلى ما بعد حدودها، قم بتعيين خاصية ElasticBehavior إلى Never.