ScrolledFrame

A container whose content can be taller (or wider) than the space it gets — settings panes, long forms, item lists. Put children into sf.content and scroll; the scrollbars appear only when needed, and the mouse wheel works over any child.

Live preview

Live preview. In the Player's built-in docs viewer (scriptweaver --help), this renders ScrolledFrame as a live, theme-aware widget you can interact with.

Example

const sf = app.ScrolledFrame({});
sf.pack.configure({ fill: 'both', expand: true });

for (const item of settings) {
  const row = sf.content.Flex({ direction: 'row', gap: 8, children: [
    sf.content.Label({ text: item.label }),
    sf.content.ToggleSwitch({}),
  ] });
  row.pack.configure({ fill: 'x', pady: 2 });
}

sf.see(someRow); // scroll a child into view

Children go into sf.content — a regular Frame — and are laid out with any manager. The frame itself is what you pack/grid.

Width behavior

By default (fitWidth: true) the content is pinned to the viewport's width: rows fill: 'x' naturally and there is never a horizontal bar — the settings-pane case. Set fitWidth: false to keep the content's natural width and let a horizontal bar appear when it overflows.

Options

Option	Type	Description
`width`, `height`	number	The viewport size in pixels (the content's size is its own).
`fitWidth`	boolean	Pin the content width to the viewport (default true).
`autohide`	boolean	Bars appear only when scrollable (default true).

Methods

Method	Description
`see(widget)`	Scroll a descendant into view (no-op if already visible).

Scrolling is also scriptable through the canvas surface, e.g. __native_tcl(sf._id, 'yview', 'moveto', '0'). Mouse-wheel scrolling works over every child, leaves wheel-handling widgets (a Text inside, a nested ScrolledFrame) to themselves, and installs nothing global.