网页html滚动代码大全(一)-网页设计-锦华智联科技

第一部分：基础滚动

这是最常见、最核心的滚动方式,即页面的默认垂直滚动。

（图片来源网络，侵删）

全屏滚动

这是现代网页设计中非常流行的效果，每次滚动都会让整个视口切换到下一个“屏”或“部分”。

实现方式：

纯CSS (推荐)：通过 height: 100vh 为每个部分设置全屏高度，并使用 scroll-snap-type 和 scroll-snap-align 来实现平滑的吸附效果。
JavaScript (库)：使用 fullPage.js、Swiper.js 等库可以轻松实现更复杂的功能，如导航、循环滚动等。

示例1：纯CSS实现全屏滚动

这种方法简单、性能好,适合大多数需求。

代码结构:

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">纯CSS全屏滚动</title>
    <style>
        /* 1. 重置默认边距和滚动条样式 */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; /* 隐藏默认滚动条 */
        }
        /* 2. 设置容器为全屏，并启用平滑滚动和滚动吸附 */
        .scroll-container {
            height: 100vh;
            overflow-y: scroll; /* 允许垂直滚动 */
            scroll-snap-type: y mandatory; /* 强制在Y轴进行滚动吸附 */
            scroll-behavior: smooth; /* 平滑滚动 */
        }
        /* 3. 为每个全屏部分设置样式 */
        .section {
            height: 100vh; /* 每个部分占满一屏 */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }
        /* 4. 为每个部分设置滚动对齐点 */
        .section:nth-child(1) { background-color: #3498db; scroll-snap-align: start; }
        .section:nth-child(2) { background-color: #e74c3c; scroll-snap-align: start; }
        .section:nth-child(3) { background-color: #2ecc71; scroll-snap-align: start; }
        .section:nth-child(4) { background-color: #f39c12; scroll-snap-align: start; }
        /* 5. 自定义滚动条样式 (可选) */
        .scroll-container::-webkit-scrollbar {
            width: 12px;
        }
        .scroll-container::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .scroll-container::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 6px;
        }
        .scroll-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
<body>
    <div class="scroll-container">
        <section class="section">第一屏</section>
        <section class="section">第二屏</section>
        <section class="section">第三屏</section>
        <section class="section">第四屏</section>
    </div>
</body>
</html>

代码解析:

html, body, .scroll-container: 通过设置 height: 100% 和 overflow: hidden，确保整个页面被一个可滚动的容器包裹,且没有默认的页面滚动条。
.scroll-container: overflow-y: scroll 启用垂直滚动。scroll-snap-type: y mandatory 是核心，它告诉浏览器这个容器在垂直方向上需要强制滚动对齐。scroll-behavior: smooth 让滚动过程更平滑。
.section: height: 100vh 确保每个部分都是视口的高度,即一屏。
.section:nth-child(...): scroll-snap-align: start 定义了每个部分的“吸附点”，当滚动停止时,浏览器会自动将这个部分的顶部对齐到容器的顶部。

示例2：使用JavaScript库 (fullPage.js)

如果你需要更丰富的功能（如导航菜单、横向滚动、循环等）,使用库是更高效的选择。

第一步：引入库文件

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

第二步：HTML结构

（图片来源网络，侵删）

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">
        <div class="slide">第三屏 - 幻灯片 1</div>
        <div class="slide">第三屏 - 幻灯片 2</div>
    </div>
    <div class="section">第四屏</div>
</div>

第三步：初始化

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

第二部分：控制滚动

在许多场景下，我们需要通过非滚动的方式（如按钮、链接）来控制页面滚动。

锚点滚动

点击链接,页面平滑滚动到页面的指定位置。

实现方式：

HTML: 在目标元素上设置 id，在链接的 href 属性中引用该 id (#id)。
CSS: 使用 scroll-behavior: smooth; 实现平滑效果。

示例：平滑锚点滚动

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">平滑锚点滚动</title>
    <style>
        html {
            scroll-behavior: smooth; /* 全局设置平滑滚动 */
        }
        body {
            font-family: sans-serif;
        }
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            background: #333;
            z-index: 1000;
        }
        nav a {
            color: white;
            text-decoration: none;
            padding: 15px 20px;
            display: inline-block;
        }
        nav a:hover {
            background: #555;
        }
        section {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2rem;
        }
        #section1 { background-color: #3498db; }
        #section2 { background-color: #e74c3c; }
        #section3 { background-color: #2ecc71; }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <a href="#section1">第一部分</a>
        <a href="#section2">第二部分</a>
        <a href="#section3">第三部分</a>
    </nav>
    <!-- 页面内容 -->
    <section id="section1">
        <h2>第一部分</h2>
    </section>
    <section id="section2">
        <h2>第二部分</h2>
    </section>
    <section id="section3">
        <h2>第三部分</h2>
    </section>
</body>
</html>

代码解析:

html { scroll-behavior: smooth; }: 这是实现平滑锚点滚动的关键,一行CSS代码即可搞定。
nav a href="#section1": 链接的 href 指向目标元素的 id,浏览器会自动处理滚动逻辑。
position: fixed;: 让导航栏固定在页面顶部,方便用户随时点击。

JavaScript 控制滚动

当滚动逻辑更复杂时（点击一个非<a>标签的按钮）,我们需要使用JavaScript。

实现方式：

使用 element.scrollIntoView({ behavior: 'smooth' }) 方法。

示例：JS控制滚动

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">JS控制滚动</title>
    <style>
        html, body {
            scroll-behavior: smooth; /* 可以保留，也可以不保留，JS会覆盖 */
        }
        #back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            display: none; /* 默认隐藏 */
        }
        #back-to-top:hover {
            background: #0056b3;
        }
        .content {
            height: 2000px; /* 创建足够长的内容以显示滚动条 */
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>滚动页面...</h1>
        <p>内容足够多时，右下角会出现一个"回到顶部"的按钮。</p>
    </div>
    <button id="back-to-top">回到顶部</button>
    <script>
        const backToTopButton = document.getElementById('back-to-top');
        // 1. 监听滚动事件，控制按钮显示/隐藏
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 100) { // 当滚动超过100px时显示按钮
                backToTopButton.style.display = "block";
            } else {
                backToTopButton.style.display = "none";
            }
        });
        // 2. 为按钮添加点击事件
        backToTopButton.addEventListener('click', () => {
            // 使用JS API平滑滚动到顶部
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    </script>
</body>
</html>

代码解析:

window.addEventListener('scroll', ...): 监听整个窗口的滚动事件。window.pageYOffset 是当前垂直滚动距离。
backToTopButton.addEventListener('click', ...): 为按钮绑定点击事件。
window.scrollTo({ top: 0, behavior: 'smooth' }): 这是核心的JS API。top: 0 表示滚动到顶部，behavior: 'smooth' 实现平滑滚动效果。

第三部分：滚动监听与触发

这是实现“滚动到视口时触发动画”这类高级效果的基础。

`Intersection Observer API` (现代、高效)

这是目前推荐的方式，用于检测一个元素是否进入了另一个元素（或视口）的可见区域，它比传统的 scroll + getBoundingClientRect() 性能好得多。

示例：滚动时显示元素

代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">滚动监听与触发</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            margin: 50px auto;
            background-color: #3498db;
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .box.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">向下滚动查看方块</h1>
    <div class="box">我出现了！</div>
    <div style="height: 1000px;"></div> <!-- 占位内容，制造滚动条 -->
    <div class="box">我也出现了！</div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // 1. 获取所有需要观察的元素
            const boxes = document.querySelectorAll('.box');
            // 2. 创建一个 Intersection Observer 实例
            const observer = new IntersectionObserver((entries, observer) => {
                // entries 是一个数组，包含所有被观察的目标元素及其状态
                entries.forEach(entry => {
                    // 3. 判断元素是否进入视口
                    if (entry.isIntersecting) {
                        // 如果进入，则添加 'is-visible' 类
                        entry.target.classList.add('is-visible');
                        // (可选) 一旦触发，就停止观察这个元素，节省性能
                        observer.unobserve(entry.target);
                    }
                });
            }, {
                // 可配置的选项
                root: null, // 根元素是视口
                rootMargin: '0px', // 根元素的边距
                threshold: 0.1 // 当10%的元素可见时触发回调
            });
            // 4. 开始观察每个 .box 元素
            boxes.forEach(box => {
                observer.observe(box);
            });
        });
    </script>
</body>
</html>

代码解析:

new IntersectionObserver(callback, options): 创建观察者实例。
- callback: 当被观察元素进入或离开视口时，这个函数会被调用。entry.isIntersecting 是一个布尔值，true表示元素正在视口中可见。
- options: 配置观察行为。threshold 是关键，它定义了当百分之多少的元素可见时触发回调。1 表示10%。
observer.observe(element): 开始观察指定的DOM元素。

总结与对比

技术类型	核心实现	优点	缺点	适用场景
基础滚动	`overflow: scroll`	浏览器原生，无需代码	功能单一	长篇文章、标准网页布局
全屏滚动 (CSS)	`height: 100vh`, `scroll-snap-type`	性能好，代码简洁，无需JS	功能有限，浏览器兼容性需注意	个人作品集、产品介绍页
全屏滚动 (JS)	`fullPage.js` 等库	功能强大，易于扩展	需要引入外部库，增加体积	需要复杂交互、导航的全屏网站
锚点滚动	`href="#id"`, `scroll-behavior: smooth`	简单，语义化好	路 hash 会改变URL	网站内导航、目录链接
JS控制滚动	`scrollIntoView()`, `scrollTo()`	灵活，可控制任意元素	需要编写JS代码	自定义按钮、模态框定位、回到顶部
滚动监听	`Intersection Observer API`	性能极高，代码清晰	逻辑相对复杂	无限滚动、懒加载、滚动触发动画

这份大全涵盖了从入门到精通的滚动技术，你可以根据你的项目需求，选择最适合的一种或多种技术组合使用,希望对你有帮助！

网页html滚动代码大全(一)

第一部分：基础滚动

全屏滚动

示例1：纯CSS实现全屏滚动

示例2：使用JavaScript库 (fullPage.js)

第二部分：控制滚动

锚点滚动

示例：平滑锚点滚动

JavaScript 控制滚动

示例：JS控制滚动

第三部分：滚动监听与触发

Intersection Observer API (现代、高效)

示例：滚动时显示元素

总结与对比

`Intersection Observer API` (现代、高效)