热门搜索列表怎么实现自动滚动效果？

一庆庆提问于 2026-03-07 23:43:20 阅读 38

交互

我在做搜索页的“热门搜索”模块，想让它像很多App那样自动横向滚动展示热门关键词。现在用的是一个普通的ul列表，试过用CSS的animation配合transform，但滚动到末尾就直接跳回开头，很突兀。

也试过用setInterval配合JS动态修改scrollLeft，但性能不太好，而且在移动端偶尔会卡顿。有没有更流畅、兼容性好的方案？比如用Intersection Observer或者纯CSS的无缝滚动？

.hot-search {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.hot-search ul {
  display: flex;
  animation: scroll 20s linear infinite;
}
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

我来解答赞 19 收藏

反馈

1 条解答

西门利君 Lv1

我来分享一个更优雅的无缝滚动方案，既解决跳转问题又提升性能。关键点在于复制一份列表内容，这样滚动到复制内容时就能无缝衔接。

先说CSS方案，相比你现在的方法只需要做两点改进：
1. 把ul内容复制一份放在同一个容器里
2. 调整动画参数让复制内容刚好接上

.hot-search ul {

  display: flex;

  animation: scroll 20s linear infinite;

  /* 关键：这里用百分比而不是固定值 */

  width: auto;

}

/* 两倍宽度保证无缝衔接 */

@keyframes scroll {

  0% { transform: translateX(0); }

  100% { transform: translateX(-100%); }

}

JS部分可以这样处理初始数据：

// 初始化时复制一份数据

const list = document.querySelector('.hot-search ul');

list.innerHTML += list.innerHTML;

如果要考虑移动端性能，可以用will-change优化：

.hot-search ul {

  will-change: transform;

}

这样实现的好处是：
1. 纯CSS方案性能比JS轮询好太多
2. 没有突兀的跳转，真正做到无缝
3. 代码量少而且容易维护

唯一要注意的是列表项不要太多，否则复制后DOM会太大影响性能。如果列表很长，建议改用JS方案控制显示数量。

2026-03-08 02:01