提问人：Teja 提问时间：10/31/2023 更新时间：10/31/2023 访问量：53
使用 CSS 动画的水平滚动 - 粘滞位置的翻译无法按预期工作
Horizontal scroll using CSS animation - translate with sticky position not working as expected
问：
我使用 CSS 动画创建了一个具有无限水平滚动的小提琴，我希望列表中的第一个元素具有粘性。
在使用属性时，它按预期工作，而在使用属性时则不起作用。left@keyframestransform: translateX
更改为 transform 的原因是
- 浏览器性能
- 卡片中的元素在实时场景中闪烁（我在
.card中有更复杂的元素结构），这有望通过更新属性的代码来解决。transform
任何人都可以为这种情况提供解决方案吗？transform
.container {
display: flex;
overflow: hidden;
}
.scroller {
display: flex;
position: relative;
animation: autoScroll 10s linear infinite;
}
.card {
padding: 10px;
margin: 0 10px;
width: 70px;
background: lightblue;
}
.sticky-el {
width: 100px;
background: cyan;
position: sticky;
left: 0;
}
@keyframes autoScroll {
0% {
transform: translateX(0);
//left: 0;
}
100% {
transform: translateX(-100%);
//left: -100%;
}
}<div class="container">
<div class="scroller">
<div class="card sticky-el">Sticky 1</div>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
<div class="scroller">
<div class="card sticky-el">Sticky 2</div>
<div class="card">Card 21</div>
<div class="card">Card 22</div>
<div class="card">Card 23</div>
</div>
</div>答：
0赞
Kevin
10/31/2023
#1
检查您是否需要这个。
为了达到预期的效果，你可以使用位置：固定和 JavaScript 的组合来创建类似的滚动效果，同时保持粘性行为。
.container {
display: flex;
overflow: hidden;
position: relative;
}
.scroller {
display: flex;
position: relative;
animation: autoScroll 10s linear infinite;
}
.card {
padding: 10px;
margin: 0 10px;
width: 70px;
background: lightblue;
}
.sticky-el {
width: 100px;
background: cyan;
position: -webkit-sticky;
position: sticky;
top: 0;
}
@keyframes autoScroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
} <div class="container">
<div class="scroller" id="scroller1">
<div class="card sticky-el">Sticky 1</div>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<!-- Add more cards as needed -->
</div>
<div class="scroller" id="scroller2">
<div class="card">Card 21</div>
<div class="card">Card 22</div>
<div class="card">Card 23</div>
<div class="card">Card 24</div>
<!-- Add more cards as needed -->
</div>
</div>评论
0赞
Teja
10/31/2023
实际上，我在 angular 应用程序中使用它，并且在 javascript 的 animationframe 中执行此操作会遇到性能问题，并且在我的场景中使用直接 CSS 动画将是理想的，因为列表数据至少为 150-200 个项目。
0赞
Kevin
10/31/2023
@Teja我已经更新了代码。
0赞
Teja
10/31/2023
但第一个元素不会保持向左粘。若要查看所需的结果，请取消注释 中的属性并注释掉该属性。left@keyframestransform
0赞
Kevin
10/31/2023
不幸的是，由于您正在寻找的特定行为，纯粹使用 CSS 实现此行为是不可能的。without JavaScript
0赞
Sajd Iqbal
10/31/2023
#2
<div class="scroll-container">
<div class="scroll-content">
<!-- Your content goes here -->
</div>
</div>
.scroll-container {
width: 100%; /* Or any desired width */
overflow-x: auto;
white-space: nowrap;
}
.scroll-content {
display: inline-block;
/* Add content width or use content to determine width */
width: 2000px; /* Change this to the total width of your content */
animation: scrollAnimation 10s linear infinite;
}
@keyframes scrollAnimation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
评论
0赞
Teja
11/1/2023
这里的粘性如何!?
评论