我试图创建一个“滑块”,用户可以水平滚动到特定的“滑块项目”,我试图用纯css创建它,然而,我似乎不能让它正常工作。
开始:
结束:
好吧,让我解释一下图片。在'Window'中的所有内容都是可见的。这也意味着无序列表的溢出。我想要的是让用户能够在容器中水平滚动以移动无序列表。然而,我不能在'容器'上使用overflow: hidden
或overflow: scroll
,因为它会隐藏所有溢出的内容,这是我不想要的。
我如何才能实现这一点,或者它甚至可以用纯CSS实现?
我的当前代码:https://jsfiddle.net/f0exzxkw/2/
5条答案
按热度按时间6rvt4ljy1#
我开始使用SwiperJs作为@Karl提到(演示:https://swiper-demo-13-centered-1j4bnx.stackblitz.io/),但在那之后我开始尝试没有它。有很多技巧,其中很多可以不同和改进。但是,要正确对齐滚动条,你必须使用自定义的。主要思想是在
.scroll-container
上设置一个负边距,使用CSS变量来计算元素之间的空间。个字符
标签:https://codepen.io/Alynva/full/gOPaGVX
erhoui1w2#
我们的想法是在一个固定的元素上设置背景,并将列表放在它的顶部。
Jsfiddle Example
个字符
tkclm6bt3#
试试这个(调整特定的值/单位以适应):
个字符
3qpi33ja4#
请试试这个:
联系我们
字符串
中文(简体)
型
DEMO HERE
gxwragnw5#
个字符