程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

您好，我想创建一个布局，它仅使用 css 和滚动捕捉来模拟在相机应用程序（如 snapchat 或 Instagram）中选择过滤器。

参考：

我已经找到了解决方案，但问题是它没有响应。当宽度改变时，捕捉不对齐。因此，我的解决方案仅适用于一种解决方案。理想情况下，当屏幕宽度发生变化时 - “过滤器”或圆形 div 应该卡在环的中间。

这是我的解决方案（使用 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>

这是上面的代码：https://play.tai​​lwindcss.com/VLhEtnYXmH

如何使 UI 响应？

解决方案

嗯，我认为你的问题不完全是捕捉距离，而是你处理这个元素的方式......

您必须在带有类的圆圈元素之前和之后创建一种“哑”项目shrink-0：

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

以及与您的屏幕匹配的宽度（因此，您需要一个 css calc()）。

calc不幸的是，我知道 Tailwind 中没有这样的类......
所以你必须在这个“哑”元素中创建一个自定义类，在你的之前和之后添加这个 css ：

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

（请注意，我在我的“哑”html 元素中添加了这个自定义类

这是一个工作沙箱：
https://play.tai​​lwindcss.com/YUKxiYgu2l

（我利用这个机会更正了你的结构和 css 类）

编辑
请注意，如果你想让你的圆形元素之间的空间更大，你只需要将 tailwind 类更改gap-6为，比方说gap-10. 但是如果你这样做，你必须调整.w-dumb课程并设置更高的负 rem（width: calc((50vw) - 4rem例如 gap-10）。