up.viewport .up-scrollbar-away

CSS class

This class is assigned to the <body> and right-anchored elements while an overlay 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.

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 elements is increased by the scrollbar width.

You can inspect the default styles in viewport.sass.

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:

.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:

.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.