如何用JS实现网页上下切换滚动效果？-网页设计-锦华智联科技

使用原生 JavaScript (最灵活)

这种方法的核心是监听鼠标滚轮事件，然后根据滚动方向动态改变整个页面的 scrollTop 值。

（图片来源网络，侵删）

实现思路：

结构包裹在一个全屏高度的容器中，每个“页面”或“节”（section）的高度也是 100vh（视口高度）。
监听滚动：使用 wheel 事件监听用户的滚动行为。
阻止默认滚动：在事件处理函数中，调用 event.preventDefault() 来阻止浏览器默认的滚动行为。
计算方向：通过 event.deltaY 判断用户是向上还是向下滚动。
平滑滚动：使用 window.scrollTo() 或 window.scrollBy() 配合 behavior: 'smooth' 实现平滑滚动到下一个或上一个全屏节。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">原生 JS 全屏滚动</title>
    <style>
        /* 重置样式，去除默认边距 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Arial', sans-serif;
            overflow: hidden; /* 隐藏默认滚动条 */
        }
        /* 主容器，高度为视口的整数倍 */
        .fullpage-container {
            height: 100vh; /* 每个节的高度为视口高度 */
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        /* 每一节的具体样式 */
        .section {
            width: 100%;
            text-align: center;
        }
        .section:nth-child(1) { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
        .section:nth-child(2) { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
        .section:nth-child(3) { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
        .section:nth-child(4) { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
    </style>
</head>
<body>
    <div class="fullpage-container">
        <section class="section">第一屏</section>
    </div>
    <div class="fullpage-container">
        <section class="section">第二屏</section>
    </div>
    <div class="fullpage-container">
        <section class="section">第三屏</section>
    </div>
    <div class="fullpage-container">
        <section class="section">第四屏</section>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const sections = document.querySelectorAll('.fullpage-container');
            let currentSection = 0;
            // 滚动处理函数
            const handleWheel = (event) => {
                // 阻止默认滚动行为
                event.preventDefault();
                // 判断滚动方向
                if (event.deltaY > 0) {
                    // 向下滚动
                    if (currentSection < sections.length - 1) {
                        currentSection++;
                    }
                } else {
                    // 向上滚动
                    if (currentSection > 0) {
                        currentSection--;
                    }
                }
                // 滚动到目标节
                scrollToSection(currentSection);
            };
            // 滚动到指定节
            const scrollToSection = (index) => {
                sections[index].scrollIntoView({
                    behavior: 'smooth'
                });
            };
            // 监听鼠标滚轮事件
            window.addEventListener('wheel', handleWheel, { passive: false });
        });
    </script>
</body>
</html>

优点：

无依赖：不需要引入任何外部库,页面加载速度快。
高度可控：所有逻辑都在自己手中,可以自由定制和扩展。
轻量级：代码量少,性能开销小。

缺点：

实现复杂：需要自己处理很多细节，比如触摸事件、滚动条隐藏、动画性能优化等。
兼容性：需要考虑不同浏览器的兼容性问题（虽然现代浏览器都已支持）。

使用专业库 (最推荐)

对于生产环境，使用成熟的库是更高效、更稳定的选择,它们已经处理了各种边缘情况和性能优化。

使用 `fullPage.js` 示例：

第一步：引入 CSS 和 JS 文件 你可以从 fullPage.js 官网下载文件，或使用 CDN。

（图片来源网络，侵删）

<!-- 使用 CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.js"></script>

第二步：修改 HTML 结构 fullPage.js 有特定的 HTML 结构要求。

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
    <div class="section">第四屏</div>
</div>

第三步：初始化 JS 只需一行代码即可初始化。

<script>
    new fullpage('#fullpage', {
        // 导航
        navigation: true,
        navigationPosition: 'right',
        // 循环滚动
        loopBottom: true,
        loopTop: true,
        // 滚动速度
        scrollingSpeed: 1000,
        // 其他配置...
    });
</script>

优点：

功能强大：内置导航、循环滚动、回调函数、多行节、自动滚动等丰富功能。
兼容性好：已经处理了各种浏览器和设备的兼容性问题。
易于使用：配置简单,文档完善。
生态成熟：社区活跃,问题容易解决。

缺点：

（图片来源网络，侵删）

增加体积：需要引入额外的 CSS 和 JS 文件。
定制性受限：虽然可配置,但深度定制可能需要覆盖其默认样式或行为。

使用 CSS (最简单)

如果只需要一个非常基础的切换效果，不关心滚动过程的平滑度，可以使用纯 CSS 和 target 伪类来实现。

实现思路：

结构：每个节设置一个 id。
链接：在页面的某个地方（比如固定的导航栏）放置指向这些 id 的锚点链接。
隐藏/显示：使用 target 伪类，当某个节成为 target 时，让它显示；其他节则隐藏。

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">CSS 全屏滚动</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html, body { height: 100%; overflow: hidden; }
        body { font-family: sans-serif; }
        /* 固定导航栏 */
        nav {
            position: fixed;
            top: 20px;
            z-index: 100;
            display: flex;
            gap: 20px;
        }
        nav a {
            padding: 10px 20px;
            background: rgba(255,255,255,0.8);
            color: #333;
            text-decoration: none;
            border-radius: 5px;
        }
        /* 主容器 */
        .pages {
            position: relative;
            height: 100vh;
        }
        /* 每一页的默认样式，隐藏起来 */
        .page {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 5rem;
            color: white;
        }
        .page:nth-child(1) { background: #3498db; }
        .page:nth-child(2) { background: #e74c3c; }
        .page:nth-child(3) { background: #2ecc71; }
        /* 当页面成为目标时，显示它 */
        .page:target {
            opacity: 1;
            visibility: visible;
        }
        /* 默认显示第一页 */
        #page1:target ~ #page1,
        #page1:not(:target) {
            opacity: 1;
            visibility: visible;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#page1">Page 1</a>
        <a href="#page2">Page 2</a>
        <a href="#page3">Page 3</a>
    </nav>
    <div class="pages">
        <div id="page1" class="page">第一屏</div>
        <div id="page2" class="page">第二屏</div>
        <div id="page3" class="page">第三屏</div>
    </div>
</body>
</html>

优点：

代码量极少：几乎不需要 JS。
性能好：CSS 过渡通常性能很好。

缺点：

不流畅：没有平滑的滚动效果,是直接切换。
依赖 URL：页面的状态会反映在 URL 的后面,用户刷新或分享链接时会跳转到对应页面。
交互不直观：用户无法通过鼠标滚轮或触摸滑动来切换,只能点击链接。

总结与选择建议

方法	优点	缺点	适用场景
原生 JS	无依赖、灵活、轻量	实现复杂、需处理兼容性	学习目的、或对性能和体积有极致要求的项目
专业库 (fullPage.js)	功能强大、兼容性好、易于使用	增加体积、定制性受限	绝大多数商业项目、个人作品集、产品展示页
纯 CSS	代码少、性能好	不流畅、依赖URL、交互不直观	简单的页面切换、不需要滚动的场景

给你的建议：

如果你是初学者或想快速实现一个效果：直接使用 fullPage.js，它能让你省去大量调试时间,并得到一个专业级的效果。
如果你想深入理解原理或项目有特殊要求：从 原生 JS 开始，自己动手实现一遍,这会让你对浏览器事件和滚动机制有更深的理解。
如果你只需要一个非常简单的点击切换：可以考虑 纯 CSS 方法，但通常不推荐用于“滚动”这个核心需求。

如何用JS实现网页上下切换滚动效果？

使用原生 JavaScript (最灵活)

实现思路：

代码示例：

使用专业库 (最推荐)

推荐库：

使用 fullPage.js 示例：

使用 CSS (最简单)

实现思路：

代码示例：

总结与选择建议

使用 `fullPage.js` 示例：