p-seamless-scroll无缝滚动，p-seamless-scroll插件，p-seamless-scroll说明，JavaScript无缝滚动示例，js无缝滚动

最新推荐文章于 2025-03-24 17:23:58 发布

≥︺‿︺≤

最新推荐文章于 2025-03-24 17:23:58 发布

阅读量565

点赞数 4

分类专栏：前端文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/chuyang11/article/details/139269964

版权

p-seamless-scroll 是一个创建无缝滚动效果的 js 插件。它有着轻量且高效的特性，支持丰富的自定义配置选项，它能够帮助你快速创建无缝滚动效果

示例代码

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <title>无缝滚动</title>
    <style type="text/css">
    #box {
        width: 800px;
        margin: 0 auto;
        height: 800px;
        overflow: auto;
        border: 2px solid #f00;
    }

    .box-body {
        width: 700px;
        height: 300px;
        margin: 40px;
        background: #ccc;
        font-size: 50px;
        line-height: 300px;
        text-align: center;
    }

    #div {
        width: 800px;
        margin: 0 auto;
    }
    </style>
</head>

<body>
    <div id="box">
        <div class="box-body">1</div>
        <div class="box-body">2</div>
        <div class="box-body">3</div>
        <div class="box-body">4</div>
    </div>
    <div id="div">
        <button onclick="play()">开始滚动</button>
        <button onclick="pause()">暂停滚动</button>
        <button onclick="reload()">重载配置</button>
        <button onclick="destroy()">销毁滚动</button>
    </div>
    <script src="p-seamless-scroll.umd.js"></script>
    <script type="text/javascript">
    // 假设已经有一个滚动容器的 DOM 元素，ID 为 'box'
    var box = document.getElementById("box");
    // 实例化 pSeamlessScroll
    var ps = new pSeamlessScroll({
        el: box,
        speed: 2