以下是几种实现 HTML 内容过长时向上循环滑动的常见方法，你可以根据具体需求和项目场景来选择合适的实现方式：
一、使用 CSS3 animation 实现简单的向上循环滑动（适用于简单的文本等内容滑动场景）
原理
通过 CSS3 的 @keyframes 规则定义元素在垂直方向上移动的关键帧动画，然后利用 animation 属性将动画应用到包含长内容的元素上，并设置为无限循环播放，以此来实现向上循环滑动的效果。
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS3 Animation Scroll</title><style>/* 定义容器样式，设置高度、溢出隐藏，确保只显示可视部分 */.scroll-container {height: 300px;overflow: hidden;border: 1px solid #ccc;}/* 定义要滑动的内容区域样式，设置宽度、高度等 */.scroll-content {width: 100%;height: auto;animation: scroll-up 10s linear infinite;}/* 定义CSS3动画关键帧，实现向上移动 */@keyframes scroll-up {0% {transform: translateY(0);}100% {transform: translateY(-100%);}}</style>
</head>
<body><div class="scroll-container"><div class="scroll-content"><p>这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。</p></div></div>
</body>
</html>在上述代码中：
.scroll-container作为内容的容器，设置了固定高度300px以及溢出隐藏，保证只有可视部分的内容显示在页面上。.scroll-content是实际包含长 HTML 内容的元素，通过animation属性应用名为scroll-up的动画，动画时长设置为10s，运动方式为线性（linear），并且设置为无限循环（infinite）。@keyframes里定义了动画的关键帧，从初始的transform: translateY(0)（即不偏移）到结束时的transform: translateY(-100%)，也就是让内容向上移动自身高度的距离，从而实现向上循环滑动的视觉效果。
二、利用 JavaScript 结合 CSS transition 属性实现（能更灵活地控制滑动逻辑和交互）
原理
借助 JavaScript 动态地改变包含长内容元素的 top 或 transform 属性（用于定位元素在垂直方向上的位置），同时 CSS 的 transition 属性可以让位置变化产生平滑过渡的滑动效果，再通过定时器等方式来不断重复滑动操作，实现循环滑动。
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript + CSS Transition Scroll</title><style>/* 容器样式，设置高度、溢出隐藏、相对定位，方便内部元素定位 */.scroll-container {height: 300px;overflow: hidden;position: relative;border: 1px solid #ccc;}/* 要滑动的内容区域样式，设置绝对定位等 */.scroll-content {width: 100%;height: auto;position: absolute;top: 0;left: 0;transition: top 0.5s ease;}</style>
</head>
<body><div class="scroll-container"><div id="scrollContent" class="scroll-content"><p>这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。</p></div></div><script>const scrollContent = document.getElementById('scrollContent');const containerHeight = document.querySelector('.scroll-container').clientHeight;let currentTop = 0;function scroll() {currentTop -= 10; // 每次向上移动的距离，可以根据需求调整if (currentTop <= -scrollContent.offsetHeight + containerHeight) {currentTop = 0;}scrollContent.style.top = currentTop + 'px';setTimeout(scroll, 1000); // 每隔1秒滑动一次，可按需调整时间间隔}scroll();</script>
</body>
</html>在上述代码中：
- 在 CSS 部分，
.scroll-container设置为相对定位，.scroll-content设置为绝对定位且初始top值为0，同时添加了transition: top 0.5s ease，这样改变top属性时会有平滑过渡的滑动效果。 - 在 JavaScript 中，首先获取到要滑动的内容元素
scrollContent和容器的高度containerHeight，定义了当前top位置变量currentTop。scroll函数里通过每次减少currentTop的值来让内容向上移动（每次移动距离可自行调整），当移动到内容全部滑出容器底部时（通过判断currentTop与内容高度和容器高度的关系来确定），就将currentTop重置为0，然后通过setTimeout定时器每隔一定时间（这里是1s）调用一次scroll函数，实现循环滑动效果。
三、使用 JavaScript 插件实现（功能丰富、方便快捷，适合快速开发复杂滑动功能）
以 jQuery 和 jQuery.scrollTo 插件为例（适用于熟悉 jQuery 生态的开发者）
jQuery.scrollTo 插件可以方便地实现页面元素的滚动效果，结合 jQuery 的强大功能以及定时器等操作，能够实现内容向上循环滑动。
- 引入相关文件：
首先需要在页面中引入jQuery库文件以及jQuery.scrollTo插件文件，可以通过 CDN 引入，示例如下：<head><meta charset="UTF-8"><title>jQuery Scroll Scroll</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script> </head> - HTML 结构搭建：
创建包含长 HTML 内容的容器元素，示例如下：
<body><div class="scroll-container"><div class="scroll-content"><p>这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。</p></div></div>
</body>- JavaScript 代码实现循环滑动逻辑：
<script>$(document).ready(function () {const scrollContainer = $('.scroll-container');const scrollContent = $('.scroll-content');const containerHeight = scrollContainer.height();let currentTop = 0;function scroll() {currentTop -= 10; // 每次向上移动的距离，可以根据需求调整if (currentTop <= -scrollContent.height() + containerHeight) {currentTop = 0;}scrollContent.scrollTo(0, currentTop);setTimeout(scroll, 1000); // 每隔1秒滑动一次，可按需调整时间间隔}scroll();});
</script>在上述代码中：
- 页面加载完成后（通过
$(document).ready函数），获取到滚动容器和内容元素以及容器的高度，定义了当前top位置变量currentTop。 scroll函数里通过改变currentTop的值来控制内容向上移动，当移动到内容全部滑出容器底部时重置currentTop，然后使用scrollTo方法让内容滚动到指定位置（这里是垂直方向上的currentTop位置），最后通过定时器每隔一定时间（1s）调用一次scroll函数来实现循环滑动。
以 Swiper 插件为例（功能强大且使用方便，广泛应用于多种滑动场景）
Swiper 是一款流行的滑动插件，本身支持多种滑动模式以及循环滑动等丰富功能，也可以用来实现长 HTML 内容的向上循环滑动。
- 引入相关文件：
通过 CDN 引入Swiper的 CSS 和 JavaScript 文件，示例如下：
<head><meta charset="UTF-8"><title>Swiper Scroll</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"><script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
</head>- HTML 结构搭建：
按照Swiper的要求搭建包含长内容的滚动元素结构，示例如下：
<body><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><div class="scroll-content"><p>这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。</p></div></div></div></div>
</body>- JavaScript 代码配置
Swiper实现循环滑动：
<script>var swiper = new Swiper('.swiper-container', {direction: 'vertical', // 设置滑动方向为垂直方向loop: true, // 开启循环滑动speed: 500, // 滑动速度，单位毫秒autoplay: {delay: 1000, // 自动播放间隔时间，单位毫秒},});
</script>在上述代码中：
- 创建
Swiper实例，传入容器选择器.swiper-container，并配置direction为vertical表示垂直方向滑动，loop设置为true开启循环滑动，还可以指定滑动速度以及自动播放的间隔时间等参数，通过这些配置就可以实现长 HTML 内容向上循环滑动且自动播放的效果了。
总之，你可以根据项目实际情况，比如对性能要求、开发复杂度、是否需要更多交互功能等因素来选择合适的方法实现 HTML 内容向上循环滑动的功能。
四、基于原生 JavaScript 实现触摸滑动（适用于移动端网页，提供更自然的触摸交互体验）
原理
利用移动端的触摸事件（如 touchstart、touchmove、touchend）来监听用户的触摸操作，根据触摸移动的距离动态调整包含长内容元素的位置，从而实现滑动效果。再结合一定的逻辑判断来处理循环滑动的情况，例如当滑动到内容顶部或底部时，让内容回到合适的位置继续滑动，以此实现向上循环滑动效果。
示例代码
以下是一个简单的基于原生 JavaScript 实现移动端 HTML 内容向上循环滑动的示例代码，适合用于移动端网页开发场景：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Native JavaScript Touch Scroll</title><style>/* 容器样式，设置高度、溢出隐藏、相对定位，方便内部元素定位 */.scroll-container {height: 300px;overflow: hidden;position: relative;border: 1px solid #ccc;}/* 要滑动的内容区域样式，设置绝对定位等 */.scroll-content {width: 100%;height: auto;position: absolute;top: 0;left: 0;transition: top 0.3s ease;}</style>
</head>
<body><div class="scroll-container"><div id="scrollContent" class="scroll-content"><p>这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的height，这样就能看到滑动的效果了。</p></div></div><script>const scrollContainer = document.querySelector('.scroll-container');const scrollContent = document.getElementById('scrollContent');const containerHeight = scrollContainer.clientHeight;let startY = 0; // 记录触摸开始时的纵坐标位置let currentTop = 0; // 当前内容元素的纵坐标位置let isMoving = false; // 标记是否正在触摸移动// 触摸开始事件处理函数scrollContainer.addEventListener('touchstart', function (event) {startY = event.touches[0].pageY;isMoving = true;scrollContent.style.transition = 'none'; // 清除过渡效果，避免滑动卡顿});// 触摸移动事件处理函数scrollContainer.addEventListener('touchmove', function (event) {if (isMoving) {const moveY = event.touches[0].pageY - startY;currentTop += moveY;if (currentTop > 0) {currentTop = 0;}if (currentTop < -scrollContent.offsetHeight + containerHeight) {currentTop = -scrollContent.offsetHeight + containerHeight;}scrollContent.style.top = currentTop + 'px';startY = event.touches[0].pageY;}});// 触摸结束事件处理函数scrollContainer.addEventListener('touchend', function (event) {isMoving = false;scrollContent.style.transition = 'top 0.3s ease';// 判断是否滑动到顶部或底部，若到顶部则重置位置到内容底部继续滑动，若到底部则重置位置到内容顶部继续滑动if (currentTop === 0) {currentTop = -scrollContent.offsetHeight + containerHeight;} else if (currentTop === -scrollContent.offsetHeight + containerHeight) {currentTop = 0;}});</script>
</body>
</html>在上述代码中：
- 在 CSS 部分，
.scroll-container设置为相对定位，.scroll-content设置为绝对定位且初始top值为0，并添加了transition: top 0.3s ease，用于在触摸结束后让内容滑动有平滑过渡效果。 - 在 JavaScript 部分：
- 首先获取相关的 DOM 元素以及容器的高度，并定义了触摸开始纵坐标位置变量
startY、内容当前纵坐标位置变量currentTop和标记是否正在移动的变量isMoving。 touchstart事件处理函数中，记录触摸开始的
- 首先获取相关的 DOM 元素以及容器的高度，并定义了触摸开始纵坐标位置变量