---
name: ".up-scrollbar-away"
area: "API"
kind: "CSS class"
parent: "up.viewport module"
visibility: "experimental"
url: "https://unpoly.com/api/up-scrollbar-away"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.viewport module](https://unpoly.com/api/up.viewport.md)</nav>

# .up-scrollbar-away

**This feature is experimental**. Please [share](https://github.com/unpoly/unpoly/discussions) your experiences so we know what to keep or change.

This class is assigned to the `<body>` and [right-anchored](https://unpoly.com/api/up-anchored-right.md) elements while an [overlay](https://unpoly.com/api/up.layer.md) with a scrolling viewport is open.

Overlays temporarily hide the document's main scroll bar to prevent multiple scrollbars from being rendered. Without a scrollbar, the `<body>` becomes wider. This may cause elements to jump in width as the overlay opens and closes. Elements can use this class to compensate by setting a larger `right` or `margin-right` style in their CSS.

<nav aria-label="Guides">

- [Learn: Overlays](https://unpoly.com/learn/overlays.md)

</nav>

## Default styles {#default-styles}

Unpoly sets some default styles for `.up-scrollbar-away` that will usually stabilize the width of absolutely positioned elements without additional CSS:

- The right padding of the `<body>` element is increased by the scrollbar width
- The `right` property of [right-anchored](https://unpoly.com/api/up-anchored-right.md) elements is increased by the scrollbar width.

You can inspect the default styles in [`viewport.sass`](https://github.com/unpoly/unpoly/blob/master/src/unpoly/viewport.sass).

## Customizing styles {#customizing-styles}

A chat support box is fixed to the bottom-right part of the screen, keeping a distance of 20 pixels from the window corner:

```css
.chat {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
```

While a scrolling overlay is open, we want to add the scrollbar width to the `right` so its position remains stable:

```css
.chat.up-scrollbar-away {
  right: calc(20px + var(--up-scrollbar-width)) !important
}
```

The `var(--up-scrollbar-width)` property is provided by Unpoly. It contains the width of the main document scrollbar that is now hidden, e.g. `15px`.