---
name: "[up-viewport]"
area: "API"
kind: "HTML attribute"
parent: "up.viewport module"
url: "https://unpoly.com/api/up-viewport"
---
# [up-viewport]
Marks this element as a scrolling container ("viewport").
Apply this attribute if your app uses a custom panel layout with fixed positioning instead of scrolling the [document's scrolling element](https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement). Alternatively, you can also push a selector matching your custom viewport to the [`up.viewport.config.viewportSelectors`](https://unpoly.com/api/up.viewport.config.md#config.viewportSelectors) array.
When [scrolling](https://unpoly.com/learn/scrolling.md), Unpoly will always scroll the viewport closest to the updated element. By default this is the document's scrolling element.
Elements with the `[up-viewport]` attribute must also have a [derivable target selector](https://unpoly.com/learn/target-derivation.md).
## Example {#example}
Here is an example of a layout for an e-mail client, showing a list of e-mails on the left side and the e-mail text on the right side:
```css
.side {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 100px;
overflow-y: scroll;
}
.main {
position: fixed;
top: 0;
bottom: 0;
left: 100px;
right: 0;
overflow-y: scroll;
}
```
This would be the HTML (notice the `up-viewport` attribute):
```html