实现多个水平滚动画廊的独立点击控制-js教程-PHP中文网

实现多个水平滚动画廊的独立点击控制

本文详解如何将单例滚动脚本重构为可复用函数，支持页面中多个 .test-js 类容器各自独立响应左右滚动事件，避免仅首个元素生效的问题。

本文详解如何将单例滚动脚本重构为可复用函数，支持页面中多个 `.test-js` 类容器各自独立响应左右滚动事件，避免仅首个元素生效的问题。

在构建多实例水平滚动画廊（如商品列表、作品集预览等）时，常见误区是使用 document.querySelector() 获取首个匹配元素，导致后续同结构画廊无法绑定事件或计算错误尺寸。原始代码中 document.querySelector('.test-js') 仅选取第一个容器，而 getElementsByClassName("test-js") 返回的 HTMLCollection 未被遍历，致使其余画廊完全失效。

正确的解决方案是：将初始化逻辑封装为纯函数，并为每个目标容器单独调用。该函数接收单个 DOM 元素作为参数，内部作用域隔离各画廊的状态（如 gallery_scroller、gallery_item_size），确保彼此互不干扰。

以下是优化后的完整实现：

function initHorizontalGallery(galleryElement) {
  if (!galleryElement) return;

  const scroller = galleryElement.querySelector('.horizontal-scroll-js');
  if (!scroller) {
    console.warn('Missing .horizontal-scroll-js inside', galleryElement);
    return;
  }

  // 动态计算单个项目宽度（减去间距）
  const firstItem = scroller.querySelector('div');
  if (!firstItem) {
    console.warn('No scrollable item found in', scroller);
    return;
  }
  const itemWidth = firstItem.clientWidth - 60; // 假设每项间有 60px 间隙

  const nextBtn = galleryElement.querySelector('.icon-scroll-next');
  const prevBtn = galleryElement.querySelector('.icon-scroll-nrev');

  if (nextBtn) {
    nextBtn.addEventListener('click', () => scroller.scrollBy({ left: itemWidth, behavior: 'smooth' }));
  }
  if (prevBtn) {
    prevBtn.addEventListener('click', () => scroller.scrollBy({ left: -itemWidth, behavior: 'smooth' }));
  }
}

// ✅ 为每个画廊容器独立初始化（支持任意数量）
initHorizontalGallery(document.querySelector('.test-js'));
initHorizontalGallery(document.querySelector('.test-js-2'));
initHorizontalGallery(document.querySelector('.test-js-3'));

? 关键改进说明：

使用 initHorizontalGallery() 替代硬编码选择器，提升可维护性与可测试性；

添加健壮性检查（如 if (!scroller)），防止因 DOM 缺失导致脚本中断；

采用 scrollBy({ left: ..., behavior: 'smooth' }) 实现原生平滑滚动（现代浏览器兼容）；

每次调用均生成独立闭包，itemWidth 和 scroller 不会跨画廊污染。

? 进阶建议：
若画廊动态插入（如通过 AJAX 加载），可改用 MutationObserver 或在插入后显式调用 initHorizontalGallery(newGallery)；对于大量画廊，也可结合 document.querySelectorAll('.test-js') 批量初始化：

document.querySelectorAll('.test-js, .test-js-2, .test-js-3').forEach(initHorizontalGallery);