本文讲解如何将单例横向滚动逻辑重构为可复用函数，支持页面中多个 .test-js 类元素独立响应点击滚动，解决仅首个元素生效的问题。
本文讲解如何将单例横向滚动逻辑重构为可复用函数，支持页面中多个 `.test-js` 类元素独立响应点击滚动，解决仅首个元素生效的问题。
在实际开发中，我们常需为多个内容区域（如商品橱窗、作品集、时间轴）实现独立的左右滚动功能。但若直接使用 document.querySelector('.test-js') 获取首个匹配元素，后续同结构的 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 child <div> found in scroll container', scroller);
return;
}
const itemWidth = firstItem.clientWidth - 60; // 建议改用 CSS 变量或 getComputedStyle 更健壮
// 绑定事件处理器（注意：箭头函数或绑定 this 非必需，因作用域已闭包）
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' }));
}
}
// ✅ 初始化所有画廊实例（支持任意数量）
document.querySelectorAll('.test-js').forEach(initHorizontalGallery);
// 或按需指定多个类名：
// initHorizontalGallery(document.querySelector('.test-js'));
// initHorizontalGallery(document.querySelector('.test-js-2'));
// initHorizontalGallery(document.querySelector('.featured-gallery'));<p>✅ <strong>关键改进说明</strong>：</p>
<ul>
<li>使用 document.querySelectorAll(...).forEach() 批量初始化，语义清晰、扩展性强；</li>
<li>每次调用均基于传入的 galleryElement 独立查询子元素，杜绝作用域污染；</li>
<li>添加基础容错（如缺失节点时 console.warn），提升调试效率；</li>
<li>启用 scrollBy({ behavior: 'smooth' }) 实现原生平滑滚动（现代浏览器支持良好）；</li>
<li>宽度计算建议后续替换为 getComputedStyle(firstItem).width 或 CSS 自定义属性，避免硬编码 -60。</li>
</ul>
<p>⚠️ <strong>注意事项</strong>：</p>
<ul><li>确保 HTML 结构一致：每个 .test-js 容器内必须包含 .horizontal-scroll-js 滚动容器及至少一个 <div> 子项；<li>若需响应式适配，请在 resize 事件中重新计算 itemWidth 并更新逻辑（可封装 updateItemSize() 方法）；</li>
<li>避免重复初始化同一元素——推荐在 DOM 加载完成后执行（如 DOMContentLoaded 或 window.onload）。</li>
<p>通过函数封装 + 元素遍历，你不仅解决了多实例问题，更构建了可维护、可测试、易扩展的交互组件基础。</p>
</div>
</li></ul>
</div>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
