Scrollbar
Usage
Scrollbar is used to communicate the existence of more content that is not able to fit on a screen or a container. It also gives user a control of exposing the data that is not visible in the viewport either in horizontal or vertical directions. If it is used for the whole page layout, it overrides browser’s native scrollbar.
Types
There are two types of Scrollbar components: Scrollbar and Scrollbar (tiny). The former is the standard size Scrollbar used in full layouts such as full viewport, a table, etc. while the Scrollbar (tiny) is used as parts of smaller components, such as a Dropdown Menu in a Select component, Modal or Card components.
Additionally, Scrollbar can be used to scroll in Vertical and Horizontal directions. For now, there is only scrollbar in Vertical direction.
Anatomy and Behavior
Arrows - are the scroll control buttons that help user to go Up or Down. They follow the default movement increments set by the browser. Arrows contain Icon component (chevron up and down).
Thumb - is the visual indicator of the relative location of user within the scrollable area. It also serves as an additional way of control to scroll up or down by clicking and dragging the Thumb. The Thumb’s length can change in size to represent the distance of scrolling available; when the view can scroll only a short way, the handle will fill up most of the bar and only allow a light shift in either direction.
Track - is the visible or invisible (in case of Scrollbar (tiny)) track along which the Thumb travels during scroll action. It also gives user additional control for scrolling. When user clicks on any point along the Track, the page location as well as Thumb update to show the requested position on a scrollable page.
The users should be allowed to scroll by clicking on the free space of Track, dragging the Thumb, clicking on the arrows, using a mouse wheel and trackpad’s scroll functionality.
The value of a Scrollbar is determined by the position of the handle along its length with the value being reported as a fraction between the extreme ends. For example, the default left-to-right bar has a value of 0.0 at the left end, 1.0 at the right end and 0.5 indicates the halfway point. A scrollbar can be oriented vertically by choosing Top To Bottom or Bottom To Top for the Direction property.
States
Individual elements in the Scrollbar have their own states. Arrow up and Arrow down are clickable and have default, :hover and :active states. Thumb is clickable and has default, :hover, :active/dragged states.
Gaps and Sizes
SCROLLBAR
- Track width: M
- Track padding till Thumb: Unit
- Arrows’ clickable area width and height: M
- Icons width and height: XS
- Thumb border radius: L
SCROLLBAR (TINY)
- Track width: XS
- Thumb border radius: L
- Track padding: Unit
Tokens
SCSS Variable
Value
$scrollbar-width
--gutter-m$scrollbar-bgColor
--color-grey-90$scrollbar-thumb
--color-grey-98$scrollbar-thumb--hover
--color-grey-98$scrollbar-thumb--active
--color-grey-98$scrollbar-arrows-color
--color-grey-40$scrollbar-arrows-bgColor
transparent$scrollbar-arrows-bgColor--hover
--grey-90$scrollbar-arrows-bgColor--active
--color-grey-90$scrollbar-arrows-bgColor--locked
--color-grey-70$scrollbar-thumb-boxshadow
--elevation-05$scrollbar-thumb-boxshadow--hover
--elevation-1$scrollbar-thumb-boxshadow--active
--elevation-2$scrollbar-track-boxshadow
--die-cut-05$scrollbar-cornerRadius
--gutter-l$scrollbar-tiny-thumb-width
--gutter-xs$scrollbar-tiny-thumb-bgColor
--color-grey-80$scrollbar-tiny-thumb-bgColor--hover
--color-grey-70$scrollbar-tiny-thumb-bgColor--active
--color-grey-70$scrollbar-tiny-cornerRadius
--gutter-lPlayground
<
ScrollbarTiny
/>
Developer Notes
The ScrollbarTiny uses a slot, which means, that you will have to wrap the content that the scrollbar should be applied to inside the corresponding component element
ts
<ScrollbarTiny>
<TextSelect
v-model="pg.choice"
label="Demo choice"
labelPosition="labelLeading"
:options="demoOptions"
:noOfOptionsToShow="5"
/>
</ScrollbarTiny>