Một ScrollingFrame bao gồm một khung vẽ có thể tùy chỉnh và thanh cuộn với khả năng cuộn tích hợp sẵn cùng với các cách khác nhau để tùy chỉnh cách hoạt động của cuộn. ScrollingFrame rất lý tưởng để hiển thị nhiều thông tin trong một không gian hạn chế và nó hoạt động tốt với danh sách và lưới.
Khung vẽ
Khung vẽ là khu vực chính của một ScrollingFrame có thể chứa các GuiObjects khác. Hành vi cuộn tự động điều chỉnh trong các tình huống sau:
| Cài đặt khung | Kết quả |
|---|---|
| Kích thước CanvasSize của khung lớn hơn chiều cao tổng thể của nó; cụ thể là tổng CanvasSize.Y vượt quá tổng Size.Y. | Cuộn dọc được bật và một thanh cuộn dọc xuất hiện. |
| Kích thước CanvasSize của khung lớn hơn chiều rộng tổng thể của nó; cụ thể là tổng CanvasSize.X vượt quá tổng Size.X. | Cuộn ngang được bật và một thanh cuộn ngang xuất hiện. |
| Cài đặt AutomaticCanvasSize của khung được đặt thành Y hoặc XY và tổng chiều cao của các nội dung của nó (các GuiObjects con) vượt quá tổng Size.Y của nó. | Cuộn dọc được bật và một thanh cuộn dọc xuất hiện. |
| Cài đặt AutomaticCanvasSize của khung được đặt thành X hoặc XY và tổng chiều rộng của các nội dung của nó (các GuiObjects con) vượt quá tổng Size.X của nó. | Cuộn ngang được bật và một thanh cuộn ngang xuất hiện. |
Thuộc tính CanvasPosition phản ánh độ lệch vị trí hiện tại của khung vẽ trong khung, tính bằng pixel, và nó đặt vị trí của các thanh cuộn tương ứng. Lưu ý rằng thuộc tính này không có tác dụng nếu các thanh cuộn không hiển thị.
Đường viền
Kích thước CanvasSize của một khung cuộn có thể bị ảnh hưởng bởi các thuộc tính VerticalScrollBarInset và/hoặc HorizontalScrollBarInset. Trong hình minh họa ví dụ sau, một khung cuộn dọc sử dụng chiều rộng khung vẽ 100%. Với VerticalScrollBarInset được đặt thành None (mặc định), khung vẽ mở rộng tới toàn bộ chiều rộng của khung cuộn, làm che khuất một phần nội dung nhỏ dưới thanh cuộn. Ngược lại, cài đặt VerticalScrollBarInset là Always hoặc ScrollBar sẽ làm giảm chiều rộng của khung vẽ bằng một khoảng là ScrollBarThickness để khung vẽ gặp cạnh với thanh cuộn.
Thanh cuộn
Thanh cuộn của khung phản ánh vị trí khung vẽ hiện tại và cung cấp khả năng tương tác tự động kéo để cuộn. Đối với các thanh cuộn dọc, thuộc tính VerticalScrollBarPosition chuyển vị trí của thanh sang bên trái hoặc bên phải của khung vẽ, nhưng các thanh cuộn ngang chỉ có thể được đặt dưới khung vẽ.
Việc xây dựng thanh cuộn bao gồm ba thuộc tính tài sản:
- TopImage — Hiển thị ở trên cùng của thanh cuộn dọc, hoặc bên trái của thanh cuộn ngang (xoay 90° ngược chiều kim đồng hồ đối với thanh cuộn ngang).
- MidImage — Mở rộng khu vực giữa TopImage và BottomImage (xoay 90° ngược chiều kim đồng hồ đối với thanh cuộn ngang).
- BottomImage — Hiển thị ở dưới cùng của thanh cuộn dọc, hoặc bên phải của thanh cuộn ngang (xoay 90° ngược chiều kim đồng hồ đối với thanh cuộn ngang).
Mỗi hình ảnh được thay đổi kích thước dựa trên thuộc tính ScrollBarThickness mà thay đổi chiều rộng của thanh cuộn dọc hoặc chiều cao của thanh cuộn ngang.
Các sửa đổi hình ảnh bổ sung có thể được thực hiện thông qua thuộc tính ScrollBarImageColor3 và ScrollBarImageTransparency điều chỉnh màu sắc của tài sản hình ảnh của thanh và thay đổi độ mờ của nó, tương ứng.
Tính đàn hồi
Theo mặc định, ScrollingFrames thể hiện hành vi cuộn đàn hồi trên các thiết bị hỗ trợ cảm ứng, nghĩa là người dùng có thể kéo khung vẽ hơi xa hơn các giới hạn của nó và, khi thả ra, khung vẽ sẽ đàn hồi trở lại giới hạn tối thiểu hoặc tối đa. Nếu bạn muốn loại bỏ hoàn toàn hành vi đàn hồi và đảm bảo khung vẽ không bao giờ cuộn quá các giới hạn của nó, hãy đặt thuộc tính ElasticBehavior thành Never.