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

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

交互

我在做搜索页的“热门搜索”模块，想让它像很多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%); }
}

我来解答赞 0 收藏

反馈

暂无解答