---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: ScrollView
description: ScrollView api.
---

import SlintProperty  from '/src/components/SlintProperty.astro';
import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';

<CodeSnippetMD imagePath="/src/assets/generated/std-widgets-scrollview.png"  imageWidth="200" imageHeight="200"  imageAlt='scrollview example'>
```slint playground
import { ScrollView } from "std-widgets.slint";
export component Example inherits Window {
    width: 200px;
    height: 200px;
    ScrollView {
        width: 200px;
        height: 200px;
        viewport-width: 300px;
        viewport-height: 300px;
        Rectangle { width: 30px; height: 30px; x: 275px; y: 50px; background: blue; }
        Rectangle { width: 30px; height: 30px; x: 175px; y: 130px; background: red; }
        Rectangle { width: 30px; height: 30px; x: 25px; y: 210px; background: yellow; }
        Rectangle { width: 30px; height: 30px; x: 98px; y: 55px; background: orange; }
    }
}
```
</CodeSnippetMD>

A Scrollview contains a viewport that is bigger than the view and can be
scrolled. It has scrollbar to interact with. The viewport-width and
viewport-height are calculated automatically to create a scrollable view
except for when using a for loop to populate the elements. In that case
the viewport-width and viewport-height aren't calculated automatically
and must be set manually for scrolling to work. The ability to
automatically calculate the viewport-width and viewport-height when
using for loops may be added in the future and is tracked in issue #407.

## Properties

### enabled
<SlintProperty propName="enabled" typeName="bool" defaultValue="true">
Used to render the frame as disabled or enabled, but doesn't change behavior of the widget.
</SlintProperty>

### has-focus
<SlintProperty propName="has-focus" typeName="bool" defaultValue="false" propertyVisibility="in-out">
Used to render the frame as focused or unfocused, but doesn't change the behavior of the widget.
</SlintProperty>

### viewport-width
<SlintProperty propName="viewport-width" typeName="length" propertyVisibility="in-out">
The width of the viewport of the scrollview.
</SlintProperty>

### viewport-height
<SlintProperty propName="viewport-height" typeName="length" propertyVisibility="in-out">
The height of the viewport of the scrollview.
</SlintProperty>

### viewport-x
<SlintProperty propName="viewport-x" typeName="length" propertyVisibility="in-out">
The `x` position of the scrollview relative to the viewport. This is usually a negative value.
</SlintProperty>

### viewport-y
<SlintProperty propName="viewport-y" typeName="length" propertyVisibility="in-out">
The `y` position of the scrollview relative to the viewport. This is usually a negative value.
</SlintProperty>

### visible-width
<SlintProperty propName="visible-width" typeName="length" propertyVisibility="out">
The width of the visible area of the ScrollView (not including the scrollbar)
</SlintProperty>

### visible-height
<SlintProperty propName="visible-height" typeName="length" propertyVisibility="out">
The height of the visible area of the ScrollView (not including the scrollbar)
</SlintProperty>

### vertical-scrollbar-policy
<SlintProperty propName="vertical-scrollbar-policy" typeName="enum" enumName="ScrollBarPolicy">
The vertical scroll bar visibility policy. The default value is `ScrollBarPolicy.as-needed`.
</SlintProperty>

### horizontal-scrollbar-policy
<SlintProperty propName="horizontal-scrollbar-policy" typeName="enum" enumName="ScrollBarPolicy">
The horizontal scroll bar visibility policy. The default value is `ScrollBarPolicy.as-needed`.
</SlintProperty>

## Callbacks

### scrolled()
Invoked when `viewport-x` or `viewport-y` is changed by a user action (dragging, scrolling).

```slint no-test {11-14}
ScrollView {
    width: 200px;
    height: 200px;
    viewport-width: 300px;
    viewport-height: 300px;
    Rectangle { width: 30px; height: 30px; x: 275px; y: 50px; background: blue; }
    Rectangle { width: 30px; height: 30px; x: 175px; y: 130px; background: red; }
    Rectangle { width: 30px; height: 30px; x: 25px; y: 210px; background: yellow; }
    Rectangle { width: 30px; height: 30px; x: 98px; y: 55px; background: orange; }
    
    scrolled() => {
        debug("viewport-x: ", self.viewport-x);
        debug("viewport-y: ", self.viewport-y);
    }
}
```
