Overflow

At times, you'll need to determine the overflow behavior of an element. Voyager provides several classes to do this.

Horizontal Scrolling

Force an element to scroll horizontally when it overflows by adding .qw-scroll-horizontal. To reduce the scrollbar size, add .qw-scrollbar to the element. The max-width default is auto but can be overridden by setting a value for the custom property --scroll-horizontal-width, or by using a width utility.

This container has a horizontal scrollbar if the contents exceed its width.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

                HTML
                
                    Copy
                
<div class="qw-scroll-horizontal qw-scrollbar">
    . . .
</div>

Vertical Scrolling

SImilarly, an element can scroll vertically by adding .qw-scroll-vertical. To reduce the scrollbar size, add .qw-scrollbar to the element. The max-width default is 50vh but can be overridden by setting a value for the custom property --scroll-vertical-height, or by using a height utility.

This container has a vertical scrollbar if the contents exceed its height.

^
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|

                HTML
                
                    Copy
                
<div class="qw-scroll-vertical qw-scrollbar">
    . . .
</div>