用HTML制作垂直滚动轮播图-html教程-PHP中文网

vertical-align 与轮播滚动无关，垂直轮播需用 transform 或 scrolltop 实现；css 动画适合静态内容，js 控制 scrolltop 更适配交互场景，需注意移动端手势中断恢复等细节。

用html制作垂直滚动轮播图

vertical-align 不是控制轮播滚动的

很多人一看到“垂直滚动”，第一反应是用 vertical-align，但这个 CSS 属性只影响行内元素或表格单元格的对齐方式，和滚动完全无关。轮播图的垂直滚动本质是容器高度固定 + 子项纵向排列 + 定时改变容器的 scrollTop 或使用 transform: translateY() 位移实现。

用 CSS @keyframes + transform 实现简洁垂直轮播

适合内容固定、数量不多、不需交互（如自动播报通知）的场景。关键点在于让所有子项纵向堆叠，然后用动画控制整体位移。

父容器设 height 和 overflow: hidden
子项用 display: block 垂直排列，总高度 = 单项高度 × 项数
动画中 transform: translateY() 从 0 到 -100%（即向上滚动一屏），再循环
注意：要让最后一项滚动后接回第一项，需在动画末尾多加一项重复内容，或用 animation-timing-function: steps() 配合精确位移

@keyframes slideUp {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
.carousel {
  height: 200px;
  overflow: hidden;
}
.carousel-inner {
  animation: slideUp 6s linear infinite;
  height: 400%; /* 4项，每项占25% */
}
.carousel-item { height: 25%; }

用 JavaScript 控制 scrollTop 实现可交互垂直轮播

当需要手动暂停、点击切换、响应鼠标悬停，或内容动态加载时，scrollTop 方案更可控。核心是定时修改容器的滚动位置，并处理边界逻辑。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

必须给容器设置 scroll-behavior: auto（避免浏览器默认平滑滚动干扰定时节奏）
每次滚动距离 = 单个 .carousel-item 的 offsetHeight，不是固定像素值
滚动到末尾后，立刻跳回顶部（scrollTop = 0），视觉上要无缝，所以建议用 requestAnimationFrame 而非 setTimeout
鼠标悬停时清除定时器，离开后重置计时，否则容易出现“悬停中还在滚动”的错觉

示例关键逻辑：

const container = document.querySelector('.carousel');
const itemHeight = container.querySelector('.carousel-item').offsetHeight;
let scrollTimer;
<p>function startScroll() {
scrollTimer = setInterval(() => {
if (container.scrollTop >= container.scrollHeight - container.clientHeight) {
container.scrollTop = 0;
} else {
container.scrollTop += itemHeight;
}
}, 3000);
}</p><p>container.addEventListener('mouseenter', () => clearInterval(scrollTimer));
container.addEventListener('mouseleave', startScroll);</p>

移动端 touch 滚动中断后恢复的坑

在 iOS Safari 或安卓 Chrome 中，用户手指拖动轮播容器后，scrollTop 可能停留在中间位置，导致自动滚动继续时出现“跳帧”或卡住。这不是 bug，而是浏览器对用户手势的尊重 —— 它暂停了 JS 控制的滚动。

不能依赖 scroll 事件判断是否“已停止”，因为 touch 结束后可能还有惯性滚动
稳妥做法：监听 touchend 和 scrollend（注意 scrollend 兼容性差，iOS 目前不支持）
更通用方案：用 getComputedStyle(container).scrollBehavior 判断是否启用平滑滚动，若启用了，改用 container.scrollTo({ top: ..., behavior: 'auto' }) 强制关闭平滑
最简兜底：每次滚动前先 container.scrollTo({ top: 0, behavior: 'auto' }) 再计算目标位置，代价是轻微闪动，但逻辑清晰