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