> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/code/controls/scrollviewer.md).

# ScrollViewer

## Introduction

The ScrollViewer control provides a container which can hold Gum objects (including other Gum Forms objects). The user can scroll the ScrollViewer with the mouse or ScrollBar.

By default the ScrollViewer's InnerPanel expands automatically in response to its children and stacks its children top-to-bottom. Of course, this behavior can be changed since the InnerPanel is a standard GraphicalUiElement.

## Code Example: Creating a ScrollViewer with Forms Children

ScrollViewers can contain other forms controls. The following code creates a ScrollViewer and adds buttons using the AddChild method.

```csharp
// Initialize
var scrollViewer = new ScrollViewer();
scrollViewer.AddToRoot();
scrollViewer.X = 50;
scrollViewer.Y = 50;
scrollViewer.Width = 200;
scrollViewer.Height = 200;
scrollViewer.InnerPanel.StackSpacing = 2;

for (int i = 0; i < 30; i++)
{
    var button = new Button();
    scrollViewer.AddChild(button);
    button.Text = "Button " + i;
    button.Click += (_, _) =>
        button.Text = DateTime.Now.ToString();
}
```

[Try on XnaFiddle.NET](https://xnafiddle.net/#snippet=H4sIAAAAAAAACm2PT0vDQBDF74F8hyGnhJQlKF6sEbSC9iJign8gUNZkbYZuZ2U7MWLpd3eTKNSme5md33szzNv6HkAw39w26-Ac2DZq0hMkZJQav5XDwae0sCmt0foJVasspECqhWwPhdG0oH2PuKqq3Dwaw2PpxS04Sw7p61H6jBXXTjlJRtKdwmXNx7U5kbIPkpQWGctylX3IEmnZmZ21oHdjIURiQIeSqSsXcNrVOI4K2hYE7nW53xpmQ7-Jr_umD9Tph3lnNeoqHCb-PEMncvXVXVoEwwr3gRjwv2emsVxBnEK4mMAigvRykMdrbiSrHNdK3JtW5CZj67L1Z-0C39v53g-0fe7K2AEAAA)

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2Fgit-blob-32664ecc42428cc13c2e7e73d7d17fc5639ebbe0%2F13_09%2043%2023.gif?alt=media" alt=""><figcaption><p>Children in a ScrollViewer</p></figcaption></figure>

## Scrolling a ScrollViewer

ScrollViewers can be scrolled by the user using by performing any of the following actions:

* Clicking on the ScrollBar buttons or track
* Dragging the ScrollBar thumb
* Using the mouse wheel to scroll vertically
* Using shift+mouse wheel to scroll horizontally. For more information see the [Horizontal Scrolling](/gum/code/controls/scrollviewer/horizontal-scrolling.md) page.

### Mouse Wheel Scroll Speed

The `MouseWheelScrollSpeed` property controls how far the content scrolls per mouse-wheel notch. It applies to both vertical scrolling and shift+wheel horizontal scrolling. Larger values scroll farther per notch; the default is `30`.

```csharp
// Initialize
var scrollViewer = new ScrollViewer();
// Scroll farther per wheel notch than the default of 30.
scrollViewer.MouseWheelScrollSpeed = 60;
```

`MouseWheelScrollSpeed` is independent of `SmallChange`, which controls the distance scrolled when clicking the ScrollBar's arrow buttons. Adjusting one does not affect the other.

Because `MouseWheelScrollSpeed` is defined on `ScrollViewer`, it is also available on every control that derives from it, including [ItemsControl](/gum/code/controls/itemscontrol.md), [ListBox](/gum/code/controls/listbox.md), and ComboBox.

## Code Example: Creating a ScrollViewer With Non-Forms Children

The following code creates a ScrollViewer and adds ColoredRectangleRuntimes to the ScrollViewer. Any non-Forms visual object can be added to the ScrollViewer through AddChild.

```csharp
// Initialize
var scrollViewer = new ScrollViewer();
scrollViewer.AddToRoot();
scrollViewer.X = 50;
scrollViewer.Y = 50;
scrollViewer.Width = 200;
scrollViewer.Height = 200;
scrollViewer.InnerPanel.StackSpacing = 2;

var random = new System.Random();
for (int i = 0; i < 30; i++)
{
    var innerRectangle = new ColoredRectangleRuntime();
    scrollViewer.AddChild(innerRectangle);
    innerRectangle.X = random.NextSingle() * 150;
    // no need to set innerRectangle.Y since each rectangle stacks
    innerRectangle.Width = 30;
    innerRectangle.Height = 30;
    innerRectangle.Color = new Color(random.Next(255), random.Next(255), random.Next(255));
}
```

[Try on XnaFiddle.NET](https://xnafiddle.net/#snippet=H4sIAAAAAAAACnVRwU4CMRS8k_APL3tahCyI4SJ6MByUizG7RiXZS7P7ZF_svpq2iEr8d9sqZIGllyYz03lvpptuByCam9tVHV2C1SscBISYLAlJ3-jg6ENoMIVWUj4RrlHDNTCuIWtAcW-ac1OT3JTlo0qVssfUizOYjA7RRSv6TKWtHDMeHVF3SMvKtnNzZtQPglEmmRXFW_YuCuKlFztpzj6SFlyqehvmy1iskzRgYeVXpSEmtkBOMpq66wou_N3v93Le5AzueB_ys1IsrOClxH-_mZJKY7mD0xVbqjE4-4eHXc0qkmW8b7XV7qOhvr_dk3v8tJnLJZ0xnMF56M8_GQ6BlVsES7AKDLoU-yYLMMQFAoqiAr1b3viyTOvY7U-4Dlr53XecEoRKmvXEjRTxeDLpDZq5TiC-lJ-o2_npdn4Bp89eML4CAAA)

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2Fgit-blob-039e9160bb30e94a80df74b98f51218e154c004a%2F13_09%2044%2012.gif?alt=media" alt=""><figcaption><p>ScrollViewer displaying multiple ColoredRectangles</p></figcaption></figure>

## Code Example: Wrapping Children

The following code shows how to wrap children in a ScrollViewer. It modifies the `InnerPanel` to change the layout type.

```csharp
// Initialize
var scrollViewer = new ScrollViewer();
scrollViewer.Width = 310;
scrollViewer.AddToRoot();
scrollViewer.Anchor(Gum.Wireframe.Anchor.Center);
var innerPanel = scrollViewer.InnerPanel;
innerPanel.ChildrenLayout = Gum.Managers.ChildrenLayout.LeftToRightStack;
innerPanel.WrapsChildren = true;

for(int i= 0; i < 100; i++)
{
    var button = new Button();
    button.Width = 70;
    button.Text = $"Btn {i}";
    button.Anchor(Gum.Wireframe.Anchor.TopLeft);
    scrollViewer.AddChild(button);
}
```

[Try on XnaFiddle.NET](https://xnafiddle.net/#snippet=H4sIAAAAAAAAA31RwWrCQBD9lSX0EKGEVQ8FxYPJoQgWSg31kss2mZihcVY2k9o2-O_dTdSaFJrDwsx78-bNS-Otqsd6783Y1HDvISGjKvEbvJn3oYyoUqPL8hXhCEYsBMFRbG5a_mie0C0n2GLGhWVOx3IILbMs1i9a89-pJaWFNr51YgUM5Ebt4dwMIiAG40acISQC86wISrukp7G6Ipb6SwuiAsvMAK3Vl67ZTrktT4rUDkw1QIM15GxN4q7gDav0vS-1NepQXSaskgvNMnJrHYkFLoScCxRJLeU0EmPpKldMwu4dJdQkJOznTnmrmTWdUw3bok3G4R12TfNB9vsxfLpL7lrZScgkGjx1RZ_4X7CxPrhzLyuH_6q90-90HOfknX4A80bhzy4CAAA)

<figure><img src="https://2695663588-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_fzQmxQ1VeUFHcoo2c%2Fuploads%2Fgit-blob-4d29bf4a74bef29dff6291c468c7dee57f9e125c%2F11_07%2054%2007.png?alt=media" alt=""><figcaption><p>ScrollViewer with wrapped children</p></figcaption></figure>

## Code Example: Filling Available Space

The following code creates a ScrollViewer that fills the entire screen using `RelativeToParent` sizing. The code also subscribes to `Window.ClientSizeChanged` to update the Gum canvas and layout when the window is resized. For more information on handling resizes, see the [Resolution and Resizing the Game Window](/gum/code/layout/resizing-the-game-window.md) page.

```csharp
// Initialize
Window.AllowUserResizing = true;
Window.ClientSizeChanged += (_, _) =>
{
    GumUI.CanvasWidth = GraphicsDevice.Viewport.Width;
    GumUI.CanvasHeight = GraphicsDevice.Viewport.Height;
    GumUI.Root.UpdateLayout();
};

var scrollViewer = new ScrollViewer();
scrollViewer.AddToRoot();
scrollViewer.Visual.WidthUnits = Gum.DataTypes.DimensionUnitType.RelativeToParent;
scrollViewer.Width = 0;
scrollViewer.Visual.HeightUnits = Gum.DataTypes.DimensionUnitType.RelativeToParent;
scrollViewer.Height = 0;

for (int i = 0; i < 30; i++)
{
    var button = new Button();
    scrollViewer.AddChild(button);
    button.Text = "Button " + i;
}
```

[Try on XnaFiddle.NET](https://xnafiddle.net/#snippet=H4sIAAAAAAACA61Rz2vCMBS--1c8eqpUgrDbnANXwQk7DK16KUhm3-yDmJQktVPxf1_SqjhlO61Q0ny_Xvrl0AIIxmZUboJHsLrEjgdIkiUuaI8ODRYkM1WxgRCqmhnUEzS0J7mGfu3opfKkiAWhtFNni3Mu15hB1Idw2YFlG_rPqTykEtzjhs3GLOZyy82CMpu7oJHmRU4rM8QtrZDNCatCactqvnfve0Va5_YPYyP44ZwoZdmsyLjFN75TpQ3bjj-6N3WRGsxKKyF8AmqXLLGC6RVUq681bJBlifKp99ScTMlFc_yZa9P4o5YbNuSWJ7sCDRvSBqUhJT3tITZBwS1tMVHvXLsibzPPXXV_Gdb88n9NuzTcrQv6VBpCkhaohtzyBA9-jaL25WZ9ix-ltUqe-nupN3U9nr9tL85JZGHjOGuaHUvwyw9PgybCfUAE5O8raB1b359-Fhi3AgAA)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.flatredball.com/gum/code/controls/scrollviewer.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.