กรอบเลื่อน

A ScrollingFrame ประกอบด้วยแคนวาสที่ปรับแต่งได้ **** และแถบเลื่อน **** ที่มีการโต้ตอบแบบเลื่อนที่ใช้งานอยู่และวิธีที่แตกต่างกันในการปรับแต่งวิธีที่การเลื่อนทำงานScrollingFrame เหมาะสำหรับการแสดงข้อมูลจํานวนมากในพื้นที่จํากัดและทํางานได้ดีกับ รายการ และ การจัดเรียงแบบกริด

Example ScrollingFrame on the screen containing a tabbed category bar and a list of magical items for the player to consider purchasing.

พื้นผิววาดภาพ

พื้นที่ วาดภาพ เป็นพื้นที่หลักของ 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° ในทิศทางตรงกันข้ามสำหรับแถบเลื่อนแนวนอน)

Diagram showing the three image asset elements which construct a scrolling frame's scroll bar.

แต่ละภาพมีขนาดเพิ่มขึ้นขึ้นอยู่กับคุณสมบัติ ScrollBarThickness ซึ่งเปลี่ยนความกว้างของแถบกากบาทแนวตั้งหรือความสูงของแถบกากบาทแนวนอน

การแก้ไขภาพเพิ่มเติมสามารถทำได้ผ่านคุณสมบัติ ScrollBarImageColor3 และ ScrollBarImageTransparency ซึ่งเปลี่ยนสีทรัพยากรภาพแถบและปรับความทึบของมันตามลำดับ

ยืดหยุ่น

โดยค่าเริ่มต้น ScrollingFrames แสดงพฤติกรรมการเลื่อนแบบยืดหยุ่นบนอุปกรณ์ที่เปิดใช้งานการแตะ ซึ่งหมายความว่าผู้ใช้สามารถลากแคนวาสไปไกลกว่าขอบได้เล็กน้อยและเมื่อปล่อยออก แคนวาสจะกลับไปที่ขีดจํากัดขั้นต่ําหรือสูงสุดหากคุณต้องการลบพฤติกรรมยืดหยุ่นออกไปอย่างสมบูรณ์และให้แคนวาสไม่เลื่อนผ่านขีดจํากัดของมัน ให้ตั้งค่าคุณสมบัติ ElasticBehavior เป็น Never

พื้นผิววาดภาพ

ส่วนหนึ่ง

แถบเลื่อน

ยืดหยุ่น

ในหน้านี้