前端 - 走马灯，el-carousel，怎么做到垂直方向持续滚动？

Question

不是间隔多少秒滚一次，而是持续滚动。

Answer 1

要使走马灯（el-carousel）在垂直方向上持续滚动，而不是每隔多少秒滚动一次，你可以使用 CSS 动画（CSS animation）或者 JavaScript 实现。下面是一个使用 CSS 的示例。

首先，你需要设置一个适当的 CSS 动画，它可以改变元素的某些属性。在这个情况下，你可能想要改变滚动位置。这是一个简单的例子：

.el-carousel__container {    animation: vertical-scroll 5s linear infinite;}@keyframes vertical-scroll {    0% { transform: translateY(0); }    100% { transform: translateY(-100%); }}

在上述代码中，.el-carousel__container 是你走马灯容器的 CSS 类。动画设置为 vertical-scroll，这是一个我们稍后定义的动画。动画持续时间为 5 秒，这是一个你可以根据需要调整的值。linear 是动画的速度曲线，infinite 表示动画将无限次重复。

然后我们定义了 vertical-scroll 动画。在 0% 的时间点（动画开始时），元素的 transform 属性为 translateY(0)，这意味着元素在原始位置。在 100% 的时间点（动画结束时），transform 属性为 translateY(-100%)，这意味着元素向上移动其自身高度。

请注意，这只是一个基本示例。你可能需要根据你的实际需求对代码进行修改和优化。如果你需要更复杂的滚动行为，例如考虑滚动速度的变化或者添加平滑的过渡效果，你可能需要使用 JavaScript 或者一个 JavaScript 库如 anime.js 来实现。