发布于2023-03-05 22:16 阅读(1323) 评论(0) 点赞(26) 收藏(5)
您好,我想创建一个布局,它仅使用 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.tailwindcss.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.tailwindcss.com/YUKxiYgu2l
(我利用这个机会更正了你的结构和 css 类)
编辑
请注意,如果你想让你的圆形元素之间的空间更大,你只需要将 tailwind 类更改gap-6
为,比方说gap-10
. 但是如果你这样做,你必须调整.w-dumb
课程并设置更高的负 rem(width: calc((50vw) - 4rem
例如 gap-10)。
作者:黑洞官方问答小能手
链接:http://www.qianduanheidong.com/blog/article/498685/5a1a67db28267c7378c3/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!