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 ซึ่งจะทำให้สีของภาพแถบเลื่อนและปรับความโปร่งใสตามลำดับ
การตัด
By default, GuiObject containers clip their content (descendant GuiObjects) through the ClipsDescendants boolean. If you want descendants to appear outside of a container's bounds, simply set ClipsDescendants to false.
Importantly, StarterGui.ClipsDescendantsSupportsRotation must be true for clipping to work on rotated descendants (non‑zero Rotation) within the container. However, clipping by a rotated container (clipping container itself is rotated) or by rounded corners (UICorner) is not supported. If you need clipping on rotated or rounded containers, consider CanvasGroup.
Rotation = 0
Rotation = 10
ความยืดหยุ่น
ตามค่าเริ่มต้น ScrollingFrames จะแสดงพฤติกรรมการเลื่อนที่ยืดหยุ่นบนอุปกรณ์ที่รองรับการสัมผัส ซึ่งหมายความว่าผู้ใช้สามารถลากผืนผ้าใบไปไกลกว่าขอบเขตเล็กน้อย และเมื่อปล่อยผืนผ้าใบจะเด้งกลับไปยังขีดจำกัดขั้นต่ำหรือสูงสุด หากคุณต้องการลบพฤติกรรมการยืดหยุ่นออกไปทั้งหมดและให้แน่ใจว่าผืนผ้าใบไม่เลื่อนเกินขีดจำกัด ให้ตั้งค่าคุณสมบัติ ElasticBehavior เป็น Never