Previous Next

CSS

CSS Overview Selectors Declarations Rule Sets Comments Reset/Normalize Origin Importance Order Specificity Inheritance Cascade Layers Inline Styles Internal Styles External Styles @import Absolute Units Relative Units Dynamic Viewport Angle Units Time Units Frequency Units: Resolution Units Keywords Color Formats Color Functions & Spaces Background Color Background Image Background Repeat Background Position Background Size Background Attachment Background Shorthand Multiple Backgrounds Linear Gradients Radial Gradients Conic Gradients Font Family Font Size Font Weight Font Style Line Height Text Align Text Decoration Text Transform Letter Spacing Word Spacing Text Shadow Text Wrap Variable Fonts Content Box Padding Box Border Box Margin Box Box Sizing Property Margin Padding Border Outline Box Shadow Block Display Inline Display Inline Block Display Static Position Relative Position Absolute Position Fixed Position Sticky Position Top Element Position Right Element Position Bottom Element Position Left Element Position Z Index Flexbox Box Layout Display Flex Flex Direction Flex Wrap Justify Content Align Items Align Content Gap, Row Gap & Column Gap Flex Grow Flex Shrink Flex Basis Flex Shorthand Order Property Align Self Practical Applications CSS Grid Layout Grid Display Grid Template Columns Grid Template Rows Grid Template Areas Justify Items Grid Auto Columns Justify Self Nested Grids Responsive Web Design Min Width Max Width Orientation Logical Operators Pointer Hover Prefers Color Scheme Fluid Images Flexible Typography Viewport Width Advanced CSS Features Defining variables Using variables Scope & Inheritance of CSS Variables Property Value Fallback Practical Applications :Hover :Active :Focus :Focus Visible :Visited :Link :First Child :Last Child :Nth Child :Nth of Type :Empty :Checked :Disabled :Enabled :Valid :Invalid :Required :Has :Not :Is :Where ::Before Pseudo Element ::After Pseudo Element ::First Letter ::First Line ::Selection ::Marker CSS 2D Transformations CSS 3D Transformations Transform Origin Transform Style Backface Visibility Transition Property Transition Duration Transition Timing Function Transition Delay Transition Shorthand Ease Timing Function Linear Timing Function Ease In Timing Function Ease Out Timing Function Ease In Out Timing Function Cubic Bezier Function Animations (@keyframes) Defining @keyframes Animation Name CSS Animation Duration Animation Timing Function CSS Animation Delay CSS Animation Iteration Count Animations Direction CSS Animation Fill Mode CSS Animation Play State CSS Filter Blur CSS Filter Brightness CSS Filter Contrast() CSS Drop Shadow CSS Grayscale CSS Hue Rotate CSS Invert CSS Opacity CSS Saturate CSS Sepia Mix Blend Mode Background Blend Mode Object Fit & Object Position Scroll Snap Type Scroll Snap Align Scroll Padding Scroll Margin Scroll Triggered Animations JS Variables

Scroll Snap Type

The scroll-snap-type property is a powerful CSS feature that allows you to control the snapping behavior of a scroll container. By applying this property to a container element, you can dictate whether and how child elements should snap into place as the user scrolls.

Example 1: Vertical Snapping (y mandatory)

/* style.css */
.scroll-container {
  height: 300px;
  overflow-y: scroll; /* Enable vertical scrolling */
  scroll-snap-type: y mandatory; /* Enforce snapping on the y-axis */
}

.scroll-item {
  height: 300px;
  scroll-snap-align: start; /* Snap to the start of the element */
}

Explanation

This code creates a vertical scroll container. The scroll-snap-type: y mandatory; rule ensures that when the user scrolls, the viewport will always snap to the beginning of one of the .scroll-item elements.

Example 2: Horizontal Snapping (x proximity)

/* style.css */
.gallery {
  display: flex;
  overflow-x: scroll; /* Enable horizontal scrolling */
  scroll-snap-type: x proximity; /* Suggest snapping on the x-axis */
}

.gallery-image {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: center; /* Snap to the center of the image */
}

Explanation

Here, a horizontal gallery is defined. scroll-snap-type: x proximity; provides a less strict snapping behavior, gently guiding the scroll to the center of the next image without forcing it.

Example 3: Snapping on Both Axes

/* style.css */
.grid-container {
  height: 400px;
  width: 400px;
  overflow: scroll; /* Enable scrolling on both axes */
  scroll-snap-type: both mandatory; /* Enforce snapping on both x and y axes */
}

.grid-item {
  width: 400px;
  height: 400px;
  scroll-snap-align: start; /* Snap to the top-left corner */
}

Explanation

This example demonstrates snapping in a two-dimensional grid. The scroll-snap-type: both mandatory; rule forces the container to snap to the start of a .grid-item on both the horizontal and vertical axes simultaneously.

Example 4: No Snapping

/* style.css */
.no-snap-container {
  height: 200px;
  overflow-y: scroll;
  scroll-snap-type: none; /* Explicitly disable scroll snapping */
}

.item {
  height: 100px;
}

Explanation

The scroll-snap-type: none; value is used to explicitly disable any scroll snapping behavior on the container. This ensures a smooth, continuous scroll without any snapping points.

Example 5: Mandatory Snapping for a Slideshow

/* style.css */
.slideshow {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* Force snapping for a clean slide transition */
}

.slide {
  min-width: 100%;
  height: 300px;
  scroll-snap-align: center; /* Center the snapped slide */
}

Explanation

In this slideshow example, scroll-snap-type: x mandatory; creates a crisp and precise snapping effect. As the user scrolls horizontally, each .slide will perfectly snap to the center of the container.

Example 6: Proximity Snapping for a Product List

/* style.css */
.product-list {
  height: 500px;
  overflow-y: scroll;
  scroll-snap-type: y proximity; /* Gently snap to products */
}

.product-card {
  height: 250px;
  scroll-snap-align: start; /* Align to the top of the card */
}

Explanation

This code is ideal for a product list where you want to hint at snapping but not force it. scroll-snap-type: y proximity; will gently pull the next product card into view as the user gets close to it.

Example 7: Combining with scroll-padding

/* style.css */
.content-window {
  height: 400px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 20px; /* Add padding to the snap position */
}

.content-section {
  height: 400px;
  scroll-snap-align: start; /* Snap to the start, considering padding */
}

Explanation

This example shows how scroll-padding-top can be used with scroll-snap-type. The snap point will be offset by 20px from the top of the container, preventing content from being flush against the edge.