当前位置： 首页 > article >正文

html内容过长，实现向上循环滑动效果

article 2025/1/8 19:39:21

以下是几种实现 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 的强大功能以及定时器等操作，能够实现内容向上循环滑动。

  1. 引入相关文件：
    首先需要在页面中引入 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>
  2. HTML 结构搭建：
    创建包含长 HTML 内容的容器元素，示例如下：
<body>
    <div class="scroll-container">
        <div class="scroll-content">
            <p>这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。这里是一段很长很长的HTML内容，可能是文章段落、列表等等，为了演示向上循环滑动的效果，我们添加足够多的内容来让它超出容器的高度，这样就能看到滑动的效果了。</p>
        </div>
    </div>
</body>
  1. 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 内容的向上循环滑动。

  1. 引入相关文件：
    通过 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>
  1. 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>
  1. 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 事件处理函数中，记录触摸开始的

http://www.kler.cn/a/470487.html

相关文章：

  • 随机置矩阵列为0[矩阵乘法pytorch版]
  • Mesa llvmpipe和softpipe对比
  • android 启动页倒计时页面编写
  • 行为模式10.职责链模式
  • 使用MediaPipe Face Mesh 面部动作检测
  • Android 性能优化：内存优化（实践篇）
  • 设计模式 结构型 外观模式（Facade Pattern）与 常见技术框架应用 解析
  • TCP Listen 原语：端口失衡、对称性及协议演进
  • Linux 磁盘管理命令:mkinitrd :建立要载入ramdisk 的映象文件ssm:命令行集中存储管理工具
  • 利用API接口提升电商平台用户体验的实践
  • 【HarmonyOS】鸿蒙应用实现屏幕录制详解和源码
  • 【Linux】深入理解进程信号机制：信号的产生、捕获与阻塞
  • Kafka【应用 04】Java实现筛选查询Kafka符合条件的最新数据（保证数据最新+修改map对象key的方法+获取指定数量的记录）源码分享粘贴可用
  • 生信技能69 - 使用deepvariant进行对基因组指定区域Calling SNPs/Indels
  • 机器学习经典算法——线性回归
  • Spring Boot（4）使用 IDEA 搭建 Spring Boot+MyBatis 项目全流程实战
  • 【PPTist】批注、选择窗格
  • 关于物联网的基础知识（一）
  • 容器技术思想 Docker K8S
  • 关于Java面试题大全网站无法访问的解决方案
  • CSS的常规布局——盒子模型
  • 云计算是如何帮助企业实现高可用性的
  • VSCode报错Module ‘“xx.vue“‘ has no default export.Vetur(1192)
  • Git的简单介绍与如何安装Git
  • node.js内置模块之---fs 模块
  • WebSocket底层原理及 java 应用