CSS快照滚动:如何在div中间引入快照滚动？

<div class="scroll-container">
  <div class="scroll-content">
    <!-- 在这里添加需要滚动显示的内容 -->
  </div>
</div>

.scroll-container {
  width: 300px; /* 设置容器的宽度 */
  height: 200px; /* 设置容器的高度 */
  overflow: hidden; /* 隐藏超出容器范围的内容 */
  position: relative; /* 设置容器为相对定位，以便内部内容绝对定位 */
}

.scroll-content {
  position: absolute; /* 设置内容为绝对定位，以便实现滚动效果 */
  top: 50%; /* 将内容置于容器中间位置 */
  left: 50%; /* 将内容置于容器中间位置 */
  transform: translate(-50%, -50%); /* 将内容向左上方偏移50%以使其居中 */
  white-space: nowrap; /* 防止内容换行 */
  transition: transform 1s ease; /* 添加过渡效果，使滚动平滑 */
}

.scroll-container:hover .scroll-content {
  transform: translate(-50%, -50%) translateY(-100%); /* 鼠标悬停时向上滚动内容 */
}