高效实现滚动时画廊项动态匹配与样式切换：纯JavaScript教程

碧海醫心

发布时间：2025-11-24 12:05:28

790人浏览过

来源于php中文网

原创

高效实现滚动时画廊项动态匹配与样式切换：纯javascript教程

本教程旨在解决滚动内容与静态画廊同步显示的问题，避免为每个元素编写重复代码。我们将介绍一种纯JavaScript方法，通过索引匹配滚动区域元素与画廊项，并利用`getBoundingClientRect()`API精确判断元素是否进入视口，从而动态切换画廊项的样式，实现灵活且可扩展的用户体验。

引言

在现代网页设计中，将页面滚动内容与固定在屏幕上的辅助元素（如侧边栏导航、画廊缩略图等）进行同步，以提供更丰富的用户体验，已成为常见需求。例如，当用户滚动到文章的某个特定章节时，侧边栏的对应目录项会自动高亮；或者当特定产品描述区域进入视口时，相关的产品图片在画廊中被突出显示。

传统的实现方式可能涉及为每个滚动区域编写独立的scrollTop检测逻辑，并结合元素ID进行匹配，这不仅代码冗余，难以维护，而且在元素数量增多时扩展性极差。本教程将介绍一种更优雅、更具通用性的纯JavaScript解决方案，它通过元素的类名和在DOM中的顺序进行匹配，利用getBoundingClientRect()方法高效检测元素是否在视口内，从而实现滚动时画廊项的动态样式切换，无需依赖复杂的ID管理。

核心原理与实现思路

本解决方案的核心在于以下两个关键点：

立即学习“Java免费学习笔记（深入）”；

基于索引的元素匹配: 我们将页面中所有需要监听的滚动区域元素和对应的画廊项分别收集到两个JavaScript数组中。通过确保这两个数组中元素的顺序是一一对应的，我们可以简单地通过相同的索引i来关联sections[i]（滚动区域）和galleryItems[i]（画廊项）。这种方法避免了对每个元素使用唯一ID，大大简化了代码和维护工作。
getBoundingClientRect()进行视口可见性检测: Element.getBoundingClientRect()方法返回一个DOMRect对象，它提供了元素相对于视口的大小和位置信息。通过检查DOMRect对象的top和bottom属性是否落在[0, window.innerHeight]范围内，我们可以精确判断元素是否至少有一部分在当前用户的视口中。window.innerHeight代表浏览器视口的高度。

HTML 结构

首先，我们需要构建基础的HTML结构。为了实现上述的基于索引的匹配，我们将画廊项和滚动区域分别用通用的类名进行标记，并确保它们在各自容器内的顺序是对应的。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动时画廊项动态匹配</title>
    <link rel="stylesheet" href="style.css">
</head>
<body onLoad="getViewScrollingElements()" onScroll="checkInView()">

    <!-- 画廊区域：固定在视口中 -->
    <div class="gallery">
        <div class="item"><p>Item 1</p></div>
        <div class="item"><p>Item 2</p></div>
        <div class="item"><p>Item 3</p></div>
        <div class="item"><p>Item 4</p></div>
        <div class="item"><p>Item 5</p></div>
        <div class="item"><p>Item 6</p></div>
        <div class="item"><p>Item 7</p></div>
        <div class="item"><p>Item 8</p></div>
        <div class="item"><p>Item 9</p></div>
        <div class="item"><p>Item 10</p></div>
        <div class="item"><p>Item 11</p></div>
        <div class="item"><p>Item 12</p></div>
        <div class="item"><p>Item 13</p></div>
        <div class="item"><p>Item 14</p></div>
        <div class="item"><p>Item 15</p></div>
        <div class="item"><p>Item 16</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/1547" title="Favird No-Code Tools"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a0e82b449361.png" alt="Favird No-Code Tools"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/1547" title="Favird No-Code Tools">Favird No-Code Tools</a>
                                                                        <p>无代码工具的聚合器</p>
                                                                </div>
                                                                <a href="/ai/1547" title="Favird No-Code Tools" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div></div>
        <div class="item"><p>Item 17</p></div>
        <div class="item"><p>Item 18</p></div>
    </div>

    <!-- 滚动内容区域 -->
    <div class="scroll_container">
        <div class="section"><p>Section 1</p></div>
        <div class="section"><p>Section 2</p></div>
        <div class="section"><p>Section 3</p></div>
        <div class="section"><p>Section 4</p></div>
        <div class="section"><p>Section 5</p></div>
        <div class="section"><p>Section 6</p></div>
        <div class="section"><p>Section 7</p></div>
        <div class="section"><p>Section 8</p></div>
        <div class="section"><p>Section 9</p></div>
        <div class="section"><p>Section 10</p></div>
        <div class="section"><p>Section 11</p></div>
        <div class="section"><p>Section 12</p></div>
        <div class="section"><p>Section 13</p></div>
        <div class="section"><p>Section 14</p></div>
        <div class="section"><p>Section 15</p></div>
        <div class="section"><p>Section 16</p></div>
        <div class="section"><p>Section 17</p></div>
        <div class="section"><p>Section 18</p></div>
    </div>

    <script src="script.js"></script>
</body>
</html>

gallery 类包裹所有画廊项，通常会配合CSS将其固定在屏幕的某个位置。
item 类用于标记每个独立的画廊项。
scroll_container 类包裹所有可滚动的区域。
section 类用于标记每个独立的滚动区域。
body 标签上的onLoad="getViewScrollingElements()"和onScroll="checkInView()"是实现动态交互的关键入口点，它们分别在页面加载和滚动时触发JavaScript函数。

CSS 样式

为了使画廊和滚动区域具有清晰的视觉效果，并支持激活状态的样式切换，我们需要定义一些基础CSS。画廊通常设置为position: fixed以保持在视口中，而滚动区域则应有足够的高度以确保页面能够滚动。

/* style.css */

body {
    margin: 0;
    font-family: sans-serif;
}

/* 画廊容器样式 */
.gallery {
    position: fixed; /* 固定在视口中 */
    top: 2vh; /* 距离视口顶部2% */
    left: 2vw; /* 距离视口左侧2% */
    background: #f0f0f0;
    border: 2px solid #ccc;
    padding: 5px;
    z-index: 1000; /* 确保在其他内容之上 */
    display: flex; /* 使用Flexbox布局画廊项 */
    flex-wrap: wrap; /* 允许画廊项换行 */
    max-width: 200px; /* 限制画廊宽度 */
}

/* 画廊项默认样式 */
.item {
    opacity: 0.2; /* 默认非激活状态，透明度较低 */
    display: inline-block;
    border: 1px solid #aaa;
    padding: 5px;
    margin: 3px;
    background-color: #fff;
    transition: opacity 0.3s ease, border-color 0.3s ease; /* 添加过渡效果，使样式变化平滑 */
    font-size: 0.9em;
    text-align: center;
}

/* 滚动容器样式 */
.scroll_container {
    margin-left: 250px; /* 为画廊留出空间 */
    padding: 20px;
}

/* 滚动区域样式 */
.section {
    height: 60vh; /* 确保每个区域有足够的高度以触发滚动 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #333;
    margin-bottom: 20px; /* 区域之间留有间距 */
    border-bottom: 1px dashed #ddd;
}

/* 区分奇偶滚动区域背景，增加视觉对比 */
.scroll_container > div:nth-of-type(odd).section {
    background: #e0f7fa; /* 浅蓝色 */
}

.scroll_container > div:nth-of-type(even).section {
    background: #ffe0b2; /* 浅橙色 */
}

这里，.item的opacity: 0.2是其默认的非激活状态。当对应的滚动区域进入视口时，我们将通过JavaScript将其透明度设置为1。transition属性确保了样式变化的平滑过渡。

JavaScript 实现

核心JavaScript逻辑包含两个主要函数：getViewScrollingElements用于页面加载时初始化元素数组，checkInView用于在页面滚动时检测可见性并更新画廊项的样式。

// script.js

var sections;     // 存储所有滚动区域元素 (NodeList)
var galleryItems; // 存储所有画廊项元素 (NodeList)

/**
 * 初始化函数，在页面加载时调用。
 * 获取所有滚动区域和画廊项的引用，并进行首次可见性检查。
 */
function getViewScrollingElements() {
    // 使用 document.getElementsByClassName 获取元素集合
    // 注意：getElementsByClassName 返回的是 HTMLCollection，它是动态的。
    // 如果DOM结构在运行时发生变化，这个集合也会自动更新。
    sections = document.getElementsByClassName("section");
    galleryItems = document.getElementsByClassName("item");

    // 页面加载后立即执行一次检查，确保画廊项的初始状态正确
    checkInView();
}

/**
 * 检查函数，在页面滚动时调用。
 * 遍历所有滚动区域，判断其是否在视口内，并相应更新画廊项的样式。
 */
function checkInView () {
    var boundingRect; // 用于存储元素的边界矩形信息
    for ( var i = 0; i < sections.length; i++ ) {
        // 获取当前滚动区域相对于视口的位置和大小信息
        // getBoundingClientRect() 返回一个 DOMRect 对象，包含 top, right, bottom, left, width, height 属性。
        // top 和 bottom 是元素边缘相对于视口顶部的距离。
        boundingRect = sections[i].getBoundingClientRect();

        // 判断滚动区域是否在视口内
        // 条件解释：
        // 1. boundingRect.top < window.innerHeight: 元素的顶部位于视口底部之上（即元素尚未完全滚出视口底部）。
        // 2. boundingRect.bottom >= 0: 元素的底部位于视口顶部之下（即元素尚未完全滚出视口顶部）。
        // 这两个条件同时满足，意味着元素至少有一部分在当前视口内。
        if ( boundingRect.top < window.innerHeight && boundingRect.bottom >=

如何精确裁剪 div 以紧密包裹图像并实现图层叠加

CSS Grid 嵌套布局中子元素定位失效的根源与正确实践

CSS Grid 嵌套容器定位原理与子元素精确定位实践指南

HTML斜体效果如何实现_HTML实现斜体文本的高频技巧【技巧】

HTML怎么添加article_文章标签内容介绍【介绍】

相关专题

DOM是什么意思

dom的英文全称是documentobjectmodel，表示文件对象模型，是w3c组织推荐的处理可扩展置标语言的标准编程接口；dom是html文档的内存中对象表示，它提供了使用javascript与网页交互的方式。想了解更多的相关内容，可以阅读本专题下面的文章。

4330

2024.08.14

CSS position定位有几种方式

有4种，分别是静态定位、相对定位、绝对定位和固定定位。更多关于CSS position定位有几种方式的内容，可以访问下面的文章。

2023.11.23

css3transition

css3transition属性用于指定如何从一个CSS样式过渡到另一个CSS样式，本专题为大家提供transition相关的文章、相关下载和相关课程，大家可以免费体验。

261

2023.06.27

C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开，系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例，帮助开发者掌握构建高可用微服务系统的关键技术，提高系统的可扩展性与维护效率。

2026.03.11

Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开，系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示，帮助开发者构建稳定高效的 Go 并发任务处理系统，提高系统在高负载环境下的处理能力与稳定性。

2026.03.10

Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开，重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析，帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系，提升团队协作效率与项目迭代速度。

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。

2026.03.06

Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。

223

2026.03.05

PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开，重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景，深入分析性能瓶颈定位与优化思路，帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

458

2026.03.04

热门下载

网站特效

网站源码

网站素材

前端模板