snap on scroll

Store Design
, ,

Topic summary

A user is seeking guidance on implementing a scroll snap effect similar to one shown in a YouTube video, specifically for use on their website (though they mention “Spotify,” they likely mean a Spotify-like interface).

Solution Provided:

  • Another user shared a CSS-based approach using CSS Scroll Snap
  • The solution includes:
    • Setting scroll-snap-type: x mandatory on the container
    • Using overflow-x: scroll and display: flex
    • Adding scroll-snap-align: start to individual cards
    • Including scroll-behavior: smooth for smoother transitions

Status: The discussion appears resolved with a working code snippet provided, though no follow-up confirmation from the original poster yet.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello, I’m looking for a YouTube tutorial or any other site on how to create a scroll snap on Spotify. So far, I haven’t found a tutorial that matches what I’m looking for on Spotify.

I’ll show you the video in question that I’d like to reproduce on my website https://www.youtube.com/watch?v=Zl-MS9TY8_w .

I’d like to reproduce this scroll snap effect. If anyone knows a bit about Spotify or even coding, could you help me.

Thank you and have a good day.

2

hi @riding2025

The scroll snap effect in the video can be achieved using CSS Scroll Snap. Here’s a quick setup:

.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
  scroll-behavior: smooth;
}

.card {
  scroll-snap-align: start;
  flex: 0 0 auto;
}

Wrap your cards in a scrollable container and you’re good to go!