js 竖向(横向)列表无缝衔接滚动

最新推荐文章于 2024-09-02 21:53:59 发布

zhooson

最新推荐文章于 2024-09-02 21:53:59 发布

阅读量4.7k

点赞数 6

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/Zhooson/article/details/106849745

版权

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的竖向和横向列表无缝滚动效果的方法，包括通过定时器控制滚动速度，以及在鼠标悬停时暂停滚动的交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

竖向列表滚动

在这里插入图片描述

当前动画，黑色框一屏显示三条数据可修改黑色框的高度，即可显示一条数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表无缝滚动</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    div {
        width: 100px;
        height: 50px;
        overflow: hidden;
        margin: 50px auto;
        border: 1px solid #000;
        text-align: center;
    }
</style>

<body>
    <div id="wrapper">
        <ul id="content">
            <li>11111</li>
            <li>22222</li>
            <li>33333</li>
            <li>44444</li>
            <li>55555</li>
            <li>66666</li>
        </ul>
        <ul id="fakeContent"></ul>
    </div>

</body>
<script>
    var content = document.getElementById("content");
    var fakeContent = document.getElementById("fakeContent");
    var wrapper = document.getElementById("wrapper");

    function roll(t) {
        fakeContent.innerHTML = content.innerHTML;
        // 开始无滚动时设为0
        wrapper.scrollTop = 0;
        // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
        var timer = setInterval(rollStart, t);

        // 鼠标移入div时暂停滚动
        wrapper.onmouseover = function() {
            clearInterval(timer);
            timer = null
        };

        // 鼠标移出div后继续滚动
        wrapper.onmouseout = function() {
            timer = setInterval(rollStart, t);
        }
    }
    // 开始滚动函数
    function rollStart() {
        // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
        if (wrapper.scrollTop >= content.scrollHeight) {
            wrapper.scrollTop = 0;
        } else {
            wrapper.scrollTop++;
        }
    }

    window.onload = roll(50);
</script>

</html>

横向列表滚动

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表无缝滚动</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    #wrapper {
        width: 900px;
        overflow: hidden;
        margin: 50px auto;
        border: 1px solid #000;
        display: flex;
    }
    
    .inner {
        display: flex;
    }
    
    li {
        width: 150px;
        list-style: none;
        height: 50px;
        text-align: center;
        line-height: 50px;
    }
</style>

<body>
    <div id="wrapper">
        <ul id="content" class="inner">
            <li>11111</li>
            <li>22222</li>
            <li>33333</li>
            <li>44444</li>
            <li>55555</li>
            <li>66666</li>
        </ul>
        <ul id="fakeContent" class="inner"></ul>
    </div>

</body>
<script>
    var content = document.getElementById("content");
    var fakeContent = document.getElementById("fakeContent");
    var wrapper = document.getElementById("wrapper");

    function roll(t) {
        fakeContent.innerHTML = content.innerHTML;
        // 开始无滚动时设为0
        wrapper.scrollTop = 0;
        // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
        var timer = setInterval(rollStart, t);

        // 鼠标移入div时暂停滚动
        wrapper.onmouseover = function() {
            clearInterval(timer);
            timer = null
        };

        // 鼠标移出div后继续滚动
        wrapper.onmouseout = function() {
            timer = setInterval(rollStart, t);
        }
    }
    // 开始滚动函数
    function rollStart() {
        // 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
        if (wrapper.scrollLeft >= content.scrollWidth) {
            wrapper.scrollLeft = 0;
        } else {
            wrapper.scrollLeft++;
        }
    }

    window.onload = roll(50);
</script>

</html>