Skip to main content

ScrollFrame

A container with scrollable contents. This works the same way as a built-in ScrollingFrame but has visual changes to match the appearance of built-in scrollers in Studio.

Dark Light
Dark Light

ScrollFrames automatically size their canvas to fit their contents, which are passed via the children parameters in createElement. By default, children are laid out with a UIListLayout; this can be overriden via the Layout prop. Either "UIListLayout" or "UIGridLayout" may be passed to Layout.ClassName. Any other properties to be applied to the layout should also be passed in the Layout prop. For example: 

local function MyComponent()
	return React.createElement(StudioComponents.ScrollFrame, {
		Layout = {
			ClassName = "UIListLayout",
			Padding = UDim.new(0, 10),
			FillDirection = Enum.FillDirection.Horizontal,
		}
	}, {
		SomeChild = React.createElement(...),
		AnotherChild = React.createElement(...),
	})
end

By default, scrolling on both the X and Y axes is enabled. To configure this, pass an Enum.ScrollingDirection value to the ScrollingDirection prop. Padding around the outside of contents can also be configured via the PaddingLeft, PaddingRight, PaddingTop, and PaddingBottom props.

info

The built-in Studio scrollers were changed during this project's lifetime to be significantly narrower. This component retains the old, wider, size because it is more accessible.

Types​

Props​

Component Props
</>
interface Props {
Layout: {
ClassName: string,
[string]: any
}?
ScrollingDirection: Enum.ScrollingDirection?
PaddingLeft: UDim?
PaddingRight: UDim?
PaddingTop: UDim?
PaddingBottom: UDim?
OnScrolled: ((scrollOffset: Vector2) → ())?
children: React.ReactNode
}
Show raw api
{
    "functions": [],
    "properties": [],
    "types": [
        {
            "name": "Props",
            "desc": "",
            "fields": [
                {
                    "name": "...",
                    "lua_type": "CommonProps",
                    "desc": ""
                },
                {
                    "name": "Layout",
                    "lua_type": "{ ClassName: string, [string]: any }?",
                    "desc": ""
                },
                {
                    "name": "ScrollingDirection",
                    "lua_type": "Enum.ScrollingDirection?",
                    "desc": ""
                },
                {
                    "name": "PaddingLeft",
                    "lua_type": "UDim?",
                    "desc": ""
                },
                {
                    "name": "PaddingRight",
                    "lua_type": "UDim?",
                    "desc": ""
                },
                {
                    "name": "PaddingTop",
                    "lua_type": "UDim?",
                    "desc": ""
                },
                {
                    "name": "PaddingBottom",
                    "lua_type": "UDim?",
                    "desc": ""
                },
                {
                    "name": "OnScrolled",
                    "lua_type": "((scrollOffset: Vector2) -> ())?",
                    "desc": ""
                },
                {
                    "name": "children",
                    "lua_type": "React.ReactNode",
                    "desc": ""
                }
            ],
            "tags": [
                "Component Props"
            ],
            "source": {
                "line": 82,
                "path": "src/Components/ScrollFrame/init.luau"
            }
        }
    ],
    "name": "ScrollFrame",
    "desc": "A container with scrollable contents. This works the same way as a built-in [ScrollingFrame] but\nhas visual changes to match the appearance of built-in scrollers in Studio. \n\n| Dark | Light |\n| - | - |\n| ![Dark](/StudioComponents/components/scrollframe/dark.png) | ![Light](/StudioComponents/components/scrollframe/light.png) |\n\nScrollFrames automatically size their canvas to fit their contents, which are passed via the\n`children` parameters in createElement. By default, children are laid out with a [UIListLayout];\nthis can be overriden via the `Layout` prop. Either \"UIListLayout\" or \"UIGridLayout\" may be\npassed to `Layout.ClassName`. Any other properties to be applied to the layout should also be \npassed in the `Layout` prop. For example:\n\n```lua\nlocal function MyComponent()\n\treturn React.createElement(StudioComponents.ScrollFrame, {\n\t\tLayout = {\n\t\t\tClassName = \"UIListLayout\",\n\t\t\tPadding = UDim.new(0, 10),\n\t\t\tFillDirection = Enum.FillDirection.Horizontal,\n\t\t}\n\t}, {\n\t\tSomeChild = React.createElement(...),\n\t\tAnotherChild = React.createElement(...),\n\t})\nend\n```\n\nBy default, scrolling on both the X and Y axes is enabled. To configure this, pass an\n[Enum.ScrollingDirection] value to the `ScrollingDirection` prop. Padding around the outside of\ncontents can also be configured via the `PaddingLeft`, `PaddingRight`, `PaddingTop`, and \n`PaddingBottom` props.\n\n:::info\nThe built-in Studio scrollers were changed during this project's lifetime to be significantly\nnarrower. This component retains the old, wider, size because it is more accessible.\n:::",
    "source": {
        "line": 42,
        "path": "src/Components/ScrollFrame/init.luau"
    }
}