---
title: Scroll
position: 11
seo_title: Telerik and Kendo UI Scroll Utilities
seo_description: The Telerik and Kendo UI Scroll utilities to control scrolling behavior, scroll snapping, and scroll margins and padding.
---

## 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.

<CSSRulesList data='{"id":"scroll"}'></CSSRulesList>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/scroll/behavior-auto","height":250,"codePreviewSettings":{"filterSelector":".k-scroll-auto,.k-scroll-smooth"}}'></LiveDemo>

#### Smooth

Use the `k-scroll-smooth` utility to enable smooth scrolling animations.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/scroll/behavior-smooth","height":250,"codePreviewSettings":{"filterSelector":".k-scroll-auto,.k-scroll-smooth"}}'></LiveDemo>

### Scroll Snap

Control how content snaps to specific positions when scrolling.

#### Snap Type

Use scroll snap type utilities to define the snap behavior direction.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/scroll/snap-type","height":500,"codePreviewSettings":{"filterSelector":".k-scroll-snap-snap-x,.k-scroll-snap-snap-y"}}'></LiveDemo>

#### Snap Strictness

Control how strictly the scroll snapping is enforced.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/scroll/snap-strictness","height":500,"codePreviewSettings":{"filterSelector":".k-scroll-snap-mandatory,.k-scroll-snap-proximity"}}'></LiveDemo>

#### Snap Align

Control how child elements align when snapping.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/scroll/snap-align","height":300,"codePreviewSettings":{"filterSelector":".k-scroll-snap-align-start,.k-scroll-snap-align-center,.k-scroll-snap-align-end,.k-scroll-snap-align-none"}}'></LiveDemo>

### Scroll Margin

Control the scroll margin around elements when scrolling to them.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/scroll/scroll-margin","height":250,"codePreviewSettings":{"filterSelector":".k-scroll-m-0,.k-scroll-m-1,.k-scroll-mt-1,.k-scroll-mr-1,.k-scroll-mb-1,.k-scroll-ml-1"}}'></LiveDemo>

### Scroll Padding

Control the scroll padding within scroll containers.

<LiveDemo data='{"links":[],"demo":"utils/interactivity/scroll/scroll-padding","height":400,"codePreviewSettings":{"filterSelector":".k-scroll-p-0,.k-scroll-p-1,.k-scroll-pt-1,.k-scroll-pr-1,.k-scroll-pb-1,.k-scroll-pl-1"}}'></LiveDemo>