How do I change scroll snap distance?

Question

Hi I want to create a layout which emulates selecting filter in a camera app (like snapchat or Instagram) using just css and scroll snapping.

Reference:

I have achieved a solution but the problem is, it is not responsive. The snapping misaligns when the width is changed. So, my solution is only good for one resolution. Ideally, When the screen width is changed - the "filters" or circular divs should snap in the middle of the ring.

Here's my solution (using tailwindcss):

<div style="background: url('https://images.pexels.com/photos/13025682/pexels-photo-13025682.jpeg?auto=compress')" class="relative h-screen w-full overflow-hidden bg-cover">
  <div class="absolute bottom-4 h-24 w-full">
    <div class="flex w-full items-center justify-center">
      <div class="h-16 w-16 rounded-full border-2"></div>
      <div class="absolute left-0 w-full bg-red-500/20">
        <div class="hide-scrollbar relative flex w-full snap-x snap-mandatory space-x-[4em] overflow-scroll pl-[22.10em] pr-[24em]">
          <div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
          <div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
          <div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
          <div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
          <div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
          <div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
          <div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
          <div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
          <div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200"></div>
          <div class="h-12 w-12 flex-shrink-0 snap-center rounded-full bg-blue-200">0</div>
        </div>
      </div>
    </div>
  </div>
</div>

Here's the above code in action: https://play.tailwindcss.com/VLhEtnYXmH

How do I make the UI responsive?

Answer 1

Well, I think your problem isn't exactly the snap distance but the way you handled this element...

You have to create kind of "dumb" items before and after your circle elements with a shrink-0 class :

<!-- Begin Dumb item -->
<div class="snap-center shrink-0">
     <div class="w-dumb shrink-0"></div>
</div>
<!-- End Dumb item -->

and a width matching your screen (so, you need a css calc()).

Unfortunately, there's no such calc class in Tailwind that I know of...
So you have to create a custom class in this "dumb" element, before and after yours and add this css :

.w-dumb {
  width: calc((50vw) - 3rem)
}

(Note that I added this custom class in my "dumb" html element

Here's a working sandbox :
https://play.tailwindcss.com/YUKxiYgu2l

(I took advantage of the opportunity to correct a little your structure and css classes)

Edit
Note that if you want to make the space bigger between your circle elements, you just have to change the tailwind class gap-6 to, let's say gap-10. But if you do so, you have to adapt the .w-dumb class and put a higher minus rem (width: calc((50vw) - 4rem for a gap-10 for example).