如何在页面中动态统计并显示当前可见及总数的 figure 元素-js教程-PHP中文网

如何在页面中动态统计并显示当前可见及总数的 figure 元素

本文介绍如何使用 jquery 统计容器内所有 figure 元素的总数，并将其显示在页面上；同时提供基于滚动位置实时更新“当前可见 figure 序号”的完整实现方案。

本文介绍如何使用 jquery 统计容器内所有 figure 元素的总数，并将其显示在页面上；同时提供基于滚动位置实时更新“当前可见 figure 序号”的完整实现方案。

要实现 figure 元素的总数显示与当前可视项序号动态更新，需分两步完成：一是静态初始化总数展示，二是监听滚动事件，结合元素可视性检测动态更新当前索引。

一、正确创建并插入总数显示元素

你原先的拼接字符串写法存在语法错误（如 +totalItems.join('') 无法执行，因 number 类型无 join 方法），且易引发 XSS 风险。推荐使用 jQuery 的安全元素构造方式：

const $container = $('.is-vertical');
const totalFigures = $container.find('figure').length;

// ✅ 推荐：语义清晰、安全可靠
$container.append($('<span>', {
  class: 'numbers',
  text: `1 / ${totalFigures}` // 初始默认显示第1项
}));</span>

该写法自动转义内容，避免 HTML 注入，同时结构可读性强。

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

二、实时追踪当前可见的 figure（基于视口可见性）

仅依赖 $(window).scrollTop() 不足以准确判断“哪个 figure 正在视口内”——需结合每个

的位置与滚动偏移综合计算。以下为健壮实现：

function updateCurrentIndex() {
  const $figures = $container.find('figure');
  const scrollTop = $(window).scrollTop();
  const windowHeight = $(window).height();

  let currentIndex = 0;
  $figures.each(function (i) {
    const $fig = $(this);
    const figTop = $fig.offset().top;
    const figBottom = figTop + $fig.outerHeight(true);

    // 判断元素是否至少 50% 进入视口（可调）
    const visibleRatio = Math.min(figBottom, scrollTop + windowHeight) - Math.max(figTop, scrollTop);
    if (visibleRatio > $fig.outerHeight(true) * 0.5) {
      currentIndex = i + 1; // 1-based index
      return false; // break loop
    }
  });

  $('.numbers').text(`${currentIndex} / ${totalFigures}`);
}

// 初始化 + 监听滚动
$(document).ready(function () {
  updateCurrentIndex(); // 首屏加载时立即更新
  $(window).on('scroll resize', _.throttle(updateCurrentIndex, 100)); // 防抖优化
});