Scrolling
Classes
The scroll-* classes can be used to set when a scrollbar appears and on which axis.
| Class | Description |
|---|---|
| scroll | Sets the overflow property to auto. |
| scroll-x | Sets the overflow-x property to auto. |
| scroll-y | Sets the overflow-y property to auto. |
| scroll-always | Sets the overflow property to scroll. |
| scroll-x-always | Sets the overflow-x property to scroll. |
| scroll-y-always | Sets the overflow-y property to scroll. |
Scroll Snap
Scroll Snap Example
The scroll-snap-* classes allow the creation of scroll anchor points within a scroll container. Scroll items (scroll container children) will snap to a scroll position relative to their scroll container, and depending on the behavior specified.
1
2
3
4
5
<div class="scroll-snap-inline width-full height-md scroll pad-items-md flex info-dark"> <div class="scroll-snap-align-center width-two-thirds height-full border-xs border-info flex-none">1</div> <div class="scroll-snap-align-center width-two-thirds height-full border-xs border-info flex-none">2</div> <div class="scroll-snap-align-center width-two-thirds height-full border-xs border-info flex-none">3</div> <div class="scroll-snap-align-center width-two-thirds height-full border-xs border-info flex-none">4</div> <div class="scroll-snap-align-center width-two-thirds height-full border-xs border-info flex-none">5</div> </div>
HTML
Scroll Snap Classes
Scroll Snap TypeNOTE: Classes listed in the following table are used on the scroll container and not the scroll items.
Scroll snap classes available.
| CSS | Description |
|---|---|
| scroll-snap | Sets scroll snap type to proximity on both the block and the inline axis (or x and y axis). |
| scroll-snap-inline | Sets scroll snap type to proximity on the inline axis only. |
| scroll-snap-block | Sets scroll snap type to proximity on the block axis only. |
| scroll-snap-mandatory | Sets scroll snap type to mandatory on both the block and the inline axis (or x and y axis). |
| scroll-snap-inline-mandatory | Sets scroll snap type to mandatory on the inline axis only. |
| scroll-snap-block-mandatory | Sets scroll snap type to mandatory on the block axis only. |
| scroll-snap-inherit | Inherits the scroll snap type from the parent element. |
Scroll Snap Align Classes
Scroll Snap AlignNOTE: Classes listed in the following table are used on the scroll items or child elements of the scroll container.
Scroll snap align classes available.
| CSS | Description |
|---|---|
| scroll-snap-align | Causes a scroll item to align with the start or end of the scroll container depending on its proximity and container properties. |
| scroll-snap-align-start | Causes a scroll item to align with the start of the scroll container depending on its proximity and container properties. |
| scroll-snap-align-center | Causes a scroll item to align with the center of the scroll container depending on its proximity and container properties. |
| scroll-snap-align-end | Causes a scroll item to align with the end of the scroll container depending on its proximity and container properties. |
| scroll-snap-align-inherit | Causes a scroll item to inherit alignment behavior from its parent. |
| scroll-snap-stop | Sets the scroll snap to always, so that the container cannot skip a snap position for this item. |
| scroll-snap-stop-inherit | Sets the scroll snap to inherit, so that the item inherits scroll snap stop behavior from its parent. |
Scroll Behavior
The scroll-behavior-* classes allow the scrolling animation to be changed.
Scroll BehaviourScroll behaviour is experimental in the Chrome browser as of this writing. It can be enabled by using chrome development flags, but is best avoided for production websites.
Scroll BehaviourNOTE: Classes listed in the following table are used on the scroll container and not the scroll items.
Scroll Behavior Classes
Scroll behavior classes available.
| CSS | Description |
|---|---|
| scroll-behavior-smooth | Causes the scrolling animation of the scroll container items to appear smooth when scrolling is triggered by navigation or via the CSS Object Model. |
| scroll-behavior-inherit | Causes the scrolling animation of the scroll container to inherit from its parent. |
Scroll Padding
Scroll Padding Example
The scroll-padding-* classes are used to apply padding to a scroll container.
1
2
3
4
5
<div class="scroll-snap-inline scroll-padding-md width-full height-md scroll pad-items-md flex info-dark"> <div class="scroll-snap-align-start width-two-thirds height-full border-xs border-info flex-none">1</div> <div class="scroll-snap-align-start width-two-thirds height-full border-xs border-info flex-none">2</div> <div class="scroll-snap-align-start width-two-thirds height-full border-xs border-info flex-none">3</div> <div class="scroll-snap-align-start width-two-thirds height-full border-xs border-info flex-none">4</div> <div class="scroll-snap-align-start width-two-thirds height-full border-xs border-info flex-none">5</div> </div>
HTML
Scroll Padding Classes
Scroll PaddingNOTE: Classes listed in the following table are used on the scroll container and not the scroll items.
Scroll padding classes available.
| Class | Size |
|---|---|
| scroll-padding-xs | 0.313rem |
| scroll-padding-sm | 0.625rem |
| scroll-padding-md | 0.938rem |
| scroll-padding-lg | 1.25rem |
| scroll-padding-xl | 1.563rem |
| scroll-padding-inline-xs | 0.313rem |
| scroll-padding-inline-sm | 0.625rem |
| scroll-padding-inline-md | 0.938rem |
| scroll-padding-inline-lg | 1.25rem |
| scroll-padding-inline-xl | 1.563rem |
| scroll-padding-inline-start-xs | 0.313rem |
| scroll-padding-inline-start-sm | 0.625rem |
| scroll-padding-inline-start-md | 0.938rem |
| scroll-padding-inline-start-lg | 1.25rem |
| scroll-padding-inline-start-xl | 1.563rem |
| scroll-padding-inline-end-xs | 0.313rem |
| scroll-padding-inline-end-sm | 0.625rem |
| scroll-padding-inline-end-md | 0.938rem |
| scroll-padding-inline-end-lg | 1.25rem |
| scroll-padding-inline-end-xl | 1.563rem |
| scroll-padding-block-xs | 0.313rem |
| scroll-padding-block-sm | 0.625rem |
| scroll-padding-block-md | 0.938rem |
| scroll-padding-block-lg | 1.25rem |
| scroll-padding-block-xl | 1.563rem |
| scroll-padding-block-start-xs | 0.313rem |
| scroll-padding-block-start-sm | 0.625rem |
| scroll-padding-block-start-md | 0.938rem |
| scroll-padding-block-start-lg | 1.25rem |
| scroll-padding-block-start-xl | 1.563rem |
| scroll-padding-block-end-xs | 0.313rem |
| scroll-padding-block-end-sm | 0.625rem |
| scroll-padding-block-end-md | 0.938rem |
| scroll-padding-block-end-lg | 1.25rem |
| scroll-padding-block-end-xl | 1.563rem |
Scroll Margin
Scroll Margin Example
The scroll-margin-* classes are used to apply margin to a scroll items.
1
2
3
4
5
<div class="scroll-snap-inline width-full height-md scroll pad-items-md flex info-dark"> <div class="scroll-snap-align-start scroll-margin-sm width-two-thirds height-full border-xs border-info flex-none">1</div> <div class="scroll-snap-align-start scroll-margin-sm width-two-thirds height-full border-xs border-info flex-none">2</div> <div class="scroll-snap-align-start scroll-margin-sm width-two-thirds height-full border-xs border-info flex-none">3</div> <div class="scroll-snap-align-start scroll-margin-sm width-two-thirds height-full border-xs border-info flex-none">4</div> <div class="scroll-snap-align-start scroll-margin-sm width-two-thirds height-full border-xs border-info flex-none">5</div> </div>
HTML
Scroll Margin Classes
Scroll MarginNOTE: Classes listed in the following table are used on the scroll items or child elements of the scroll container.
Scroll margin classes available.
| Class | Size |
|---|---|
| scroll-margin-xs | 1.25rem |
| scroll-margin-sm | 2.5rem |
| scroll-margin-md | 5rem |
| scroll-margin-lg | 10rem |
| scroll-margin-xl | 20rem |
| scroll-margin-inline-xs | 1.25rem |
| scroll-margin-inline-sm | 2.5rem |
| scroll-margin-inline-md | 5rem |
| scroll-margin-inline-lg | 10rem |
| scroll-margin-inline-xl | 20rem |
| scroll-margin-inline-start-xs | 1.25rem |
| scroll-margin-inline-start-sm | 2.5rem |
| scroll-margin-inline-start-md | 5rem |
| scroll-margin-inline-start-lg | 10rem |
| scroll-margin-inline-start-xl | 20rem |
| scroll-margin-inline-end-xs | 1.25rem |
| scroll-margin-inline-end-sm | 2.5rem |
| scroll-margin-inline-end-md | 5rem |
| scroll-margin-inline-end-lg | 10rem |
| scroll-margin-inline-end-xl | 20rem |
| scroll-margin-block-xs | 1.25rem |
| scroll-margin-block-sm | 2.5rem |
| scroll-margin-block-md | 5rem |
| scroll-margin-block-lg | 10rem |
| scroll-margin-block-xl | 20rem |
| scroll-margin-block-start-xs | 1.25rem |
| scroll-margin-block-start-sm | 2.5rem |
| scroll-margin-block-start-md | 5rem |
| scroll-margin-block-start-lg | 10rem |
| scroll-margin-block-start-xl | 20rem |
| scroll-margin-block-end-xs | 1.25rem |
| scroll-margin-block-end-sm | 2.5rem |
| scroll-margin-block-end-md | 5rem |
| scroll-margin-block-end-lg | 10rem |
| scroll-margin-block-end-xl | 20rem |