This feature is experimental. It may be changed or removed in a future version.
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.
Unpoly sets some default styles for .up-scrollbar-away
that will usually stabilize
the width of absolutely positioned elements without additional CSS:
<body>
element is increased by the scrollbar widthright
property of right-anchored elements is increased by the scrollbar width.You can inspect the default styles
in viewport.sass
.
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;
right: 20px;
}
While a scrolling overlay is open we want to add the scrollbar width to the right
so it 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
.