Scroll
The Telerik and Kendo UI Scroll Utilities are CSS utility classes that enable you to control scrolling behavior, including smooth scrolling, scroll snapping, and scroll margins and padding.
| Utility Class | CSS Property |
|---|---|
.k-scroll-auto | scroll-behavior: auto; |
.k-scroll-smooth | scroll-behavior: smooth; |
.k-scroll-snap-snap-x | scroll-snap-type: x var(--k-scroll-snap-strictness); |
.k-scroll-snap-snap-y | scroll-snap-type: y var(--k-scroll-snap-strictness); |
.k-scroll-snap-mandatory | --k-scroll-snap-strictness: mandatory; |
.k-scroll-snap-proximity | --k-scroll-snap-strictness: proximity; |
.k-scroll-snap-stop-normal | scroll-snap-stop: normal; |
.k-scroll-snap-stop-always | scroll-snap-stop: always; |
.k-scroll-snap-align-start | scroll-snap-align: start; |
.k-scroll-snap-align-end | scroll-snap-align: end; |
.k-scroll-snap-align-center | scroll-snap-align: center; |
.k-scroll-snap-align-none | scroll-snap-align: none; |
.k-scroll-m-0 | scroll-margin-top: 0; |
.k-scroll-m-1px | scroll-margin-top: 1px; |
.k-scroll-m-1 | scroll-margin-top: 0.25rem; |
.k-scroll-mr-0 | scroll-margin-right: 0; |
.k-scroll-mr-1px | scroll-margin-right: 1px; |
.k-scroll-mr-1 | scroll-margin-right: 0.25rem; |
.k-scroll-mb-0 | scroll-margin-bottom: 0; |
.k-scroll-mb-1px | scroll-margin-bottom: 1px; |
.k-scroll-mb-1 | scroll-margin-bottom: 0.25rem; |
.k-scroll-ml-0 | scroll-margin-left: 0; |
.k-scroll-ml-1px | scroll-margin-left: 1px; |
.k-scroll-ml-1 | scroll-margin-left: 0.25rem; |
.k-scroll-y-1 | scroll-margin-block: 0.25rem; |
.k-scroll-p-0 | scroll-padding-top: 0; |
.k-scroll-p-1px | scroll-padding-top: 1px; |
.k-scroll-p-1 | scroll-padding-top: 0.25rem; |
.k-scroll-pr-0 | scroll-padding-right: 0; |
.k-scroll-pr-1px | scroll-padding-right: 1px; |
.k-scroll-pr-1 | scroll-padding-right: 0.25rem; |
.k-scroll-pb-0 | scroll-padding-bottom: 0; |
.k-scroll-pb-1px | scroll-padding-bottom: 1px; |
.k-scroll-pb-1 | scroll-padding-bottom: 0.25rem; |
.k-scroll-pl-0 | scroll-padding-left: 0; |
.k-scroll-pl-1px | scroll-padding-left: 1px; |
.k-scroll-pl-1 | scroll-padding-left: 0.25rem; |
.k-scroll-x-0 | scroll-padding-inline: 0; |
.k-scroll-x-1px | scroll-padding-inline: 1px; |
.k-scroll-x-1 | scroll-padding-inline: 0.25rem; |
.k-scroll-y-0 | scroll-padding-block: 0; |
.k-scroll-y-1px | scroll-padding-block: 1px; |
Scroll Behavior
Control how scrolling behaves when navigating to anchors or using scroll methods.
Auto
Use the k-scroll-auto utility for the default browser scrolling behavior.
Smooth
Use the k-scroll-smooth utility to enable smooth scrolling animations.
Scroll Snap
Control how content snaps to specific positions when scrolling.
Snap Type
Use scroll snap type utilities to define the snap behavior direction.
Snap Strictness
Control how strictly the scroll snapping is enforced.
Snap Align
Control how child elements align when snapping.
Scroll Margin
Control the scroll margin around elements when scrolling to them.
Scroll Padding
Control the scroll padding within scroll containers.
