利用JS、CSS实现列表自动滑动滚动

要实现列表的自动滑动滚动，可以使用JavaScript结合CSS来完成。以下是一个简单的例子，演示如何使用JavaScript和CSS来实现一个自动滚动的列表。

HTML:

<div class="scroll-container">
  <ul class="auto-scroll-list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <!-- 更多列表项 -->
  </ul>
</div>

CSS:

.scroll-container {
  overflow: hidden;
  position: relative;
  height: 100px; /* 根据需要设置高度 */
}
 
.auto-scroll-list {
  position: absolute;
  width: 100%;
  left: 0;
  animation: scroll 10s linear infinite; /* 调整时间以改变滚动速度 */
}
 
.auto-scroll-list li {
  list-style: none;
  padding: 5px;
  /* 其他样式 */
}
 
@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%); /* 假设列表项的总高度大于容器高度 */
  }
}

JavaScript:

// 如果需要在列表项增多时自动调整动画时间，可以使用如下代码
const list = document.querySelector('.auto-scroll-list');
const listItems = list.querySelectorAll('li');
const scrollContainer = document.querySelector('.scroll-container');
 
// 计算列表总高度
let totalHeight = 0;
listItems.forEach((item) => {
  totalHeight += item.offsetHeight;
});
 
// 设置动画时间
const animationDuration = totalHeight / (scrollContainer.offsetHeight / 30) * 3; // 每秒滚动高度的3倍
list.style.animation = `scroll ${animationDuration}s linear infinite`;

这段代码会创建一个自上而下连续滚动的列表。通过CSS @keyframes 规则，我们定义了一个名为 scroll 的动画，它会使列表从上到下移动。JavaScript 代码用于计算列表的总高度并设置合适的动画时间，以保证列表项在用户可见区域内平滑循环滚动。