# ScrollViewComponent

Class · extends [`Component`](https://api.playcanvas.com/engine/classes/Component.md) · category: User Interface

Source: https://github.com/playcanvas/engine/blob/f059dc005842f76e052cdf44d8370c8c7ec475ac/src/framework/components/scroll-view/component.js#L59

The ScrollViewComponent enables an [Entity](https://api.playcanvas.com/engine/classes/Entity.md) to behave like a masked scrolling area, with
optional horizontal and vertical scroll bars. The component exposes references to child
entities that represent the viewport, the content, and the (optional) horizontal and vertical
[ScrollbarComponent](https://api.playcanvas.com/engine/classes/ScrollbarComponent.md)s.

You should never need to use the ScrollViewComponent constructor directly. To add a
ScrollViewComponent to an [Entity](https://api.playcanvas.com/engine/classes/Entity.md), use [Entity#addComponent](https://api.playcanvas.com/engine/classes/Entity.md#addcomponent):

```javascript
const entity = new Entity();
entity.addComponent('element', {
    type: ELEMENTTYPE_GROUP,
    useInput: true
});
entity.addComponent('scrollview', {
    horizontal: false,
    vertical: true,
    bounceAmount: 0.1
});
```

Once the ScrollViewComponent is added to the entity, you can access it via the
[Entity#scrollview](https://api.playcanvas.com/engine/classes/Entity.md#scrollview) property:

```javascript
entity.scrollview.scroll = new Vec2(0, 1); // Scroll to the bottom

console.log(entity.scrollview.scroll);        // Get the scroll position and print it
```

Relevant Engine API examples:

- [Scroll View](https://playcanvas.github.io/#/user-interface/scroll-view)

## Accessors

### bounceAmount

```ts
get bounceAmount(): number
set bounceAmount(arg: number)
```

Gets how far the content should move before bouncing back.

### contentEntity

```ts
get contentEntity(): Entity | null
set contentEntity(arg: Entity | null)
```

Gets the entity which contains the scrolling content itself.

### friction

```ts
get friction(): number
set friction(arg: number)
```

Gets how freely the content should move if thrown.

### horizontal

```ts
get horizontal(): boolean
set horizontal(arg: boolean)
```

Gets whether horizontal scrolling is enabled.

### horizontalScrollbarEntity

```ts
get horizontalScrollbarEntity(): Entity | null
set horizontalScrollbarEntity(arg: Entity | null)
```

Gets the entity to be used as the horizontal scrollbar.

### horizontalScrollbarVisibility

```ts
get horizontalScrollbarVisibility(): number
set horizontalScrollbarVisibility(arg: number)
```

Gets whether the horizontal scrollbar should be visible all the time, or only visible when
the content exceeds the size of the viewport.

### mouseWheelSensitivity

```ts
get mouseWheelSensitivity(): Vec2
set mouseWheelSensitivity(arg: Vec2)
```

Gets the mouse wheel horizontal and vertical sensitivity.

### scroll

```ts
get scroll(): Vec2
set scroll(value: Vec2)
```

Gets the scroll value.

### scrollMode

```ts
get scrollMode(): number
set scrollMode(arg: number)
```

Gets the scroll mode of the scroll viewer.

### useMouseWheel

```ts
get useMouseWheel(): boolean
set useMouseWheel(arg: boolean)
```

Gets whether to use mouse wheel for scrolling (horizontally and vertically).

### vertical

```ts
get vertical(): boolean
set vertical(arg: boolean)
```

Gets whether vertical scrolling is enabled.

### verticalScrollbarEntity

```ts
get verticalScrollbarEntity(): Entity | null
set verticalScrollbarEntity(arg: Entity | null)
```

Gets the entity to be used as the vertical scrollbar.

### verticalScrollbarVisibility

```ts
get verticalScrollbarVisibility(): number
set verticalScrollbarVisibility(arg: number)
```

Gets whether the vertical scrollbar should be visible all the time, or only visible when the
content exceeds the size of the viewport.

### viewportEntity

```ts
get viewportEntity(): Entity | null
set viewportEntity(arg: Entity | null)
```

Gets the entity to be used as the masked viewport area, within which the content will scroll.

## Events

### EVENT_SETSCROLL

```ts
static EVENT_SETSCROLL: string = 'set:scroll'
```

Fired whenever the scroll position changes. The handler is passed a [Vec2](https://api.playcanvas.com/engine/classes/Vec2.md) containing
the horizontal and vertical scroll values in the range 0..1.

**Example**

```ts
entity.scrollview.on('set:scroll', (scroll) => {
    console.log(`Horizontal scroll position: ${scroll.x}`);
    console.log(`Vertical scroll position: ${scroll.y}`);
});
```

## Inherited from [Component](https://api.playcanvas.com/engine/classes/Component.md)

- `entity: Entity`
- `system: ComponentSystem`
- `get enabled(): boolean` · `set enabled(value: boolean)`
- `fire(name: string, arg1?: any, arg2?: any, arg3?: any, arg4?: any, arg5?: any, arg6?: any, arg7?: any, arg8?: any): EventHandler`
- `hasEvent(name: string): boolean`
- `off(name?: string, callback?: HandleEventCallback, scope?: any): EventHandler`
- `on(name: string, callback: HandleEventCallback, scope?: any): EventHandle`
- `once(name: string, callback: HandleEventCallback, scope?: any): EventHandle`