多元素场景下JavaScript点击ScrollBy仅首个元素生效问题求助

问题：编写的左右滚动脚本，在页面存在多个.test-js类元素时，只有第一个元素的滚动功能正常，其余元素点击图标无响应。

原代码问题分析：

• document.querySelector('.test-js') 只会返回第一个匹配的DOM元素，后续的.test-js元素完全没被处理
• 代码中虽然获取了所有.test-js元素到myEle，但并没有对这个集合进行遍历操作，等于白拿了

修复方案：遍历所有.test-js元素，为每个元素单独绑定滚动事件，确保每个元素的滚动逻辑独立。

修改后的代码：

const galleryElements = document.getElementsByClassName("test-js");

// 把类数组转成数组，方便遍历
Array.from(galleryElements).forEach(gallery => {
    const gallery_scroller = gallery.querySelector('.horizontal-scroll-js');
    // 先判断子元素是否存在，避免报错
    const firstItem = gallery_scroller.querySelector('div');
    if (!firstItem) return;
    
    const gallery_item_size = firstItem.clientWidth - 60;

    // 绑定下一页按钮事件
    gallery.querySelector('.icon-scroll-next')?.addEventListener('click', () => {
        gallery_scroller.scrollBy(gallery_item_size, 0);
    });
    // 绑定上一页按钮事件
    gallery.querySelector('.icon-scroll-nrev')?.addEventListener('click', () => {
        gallery_scroller.scrollBy(-gallery_item_size, 0);
    });
});

关键修改点：

• 遍历所有.test-js元素，每个元素单独处理，不再只操作第一个
• 用箭头函数直接编写事件逻辑，避免闭包变量污染问题
• 增加元素存在性判断（?.可选链操作符），防止找不到元素时抛出错误
• 以遍历后的当前元素为上下文查询内部节点，确保每个元素的滚动容器、按钮都是自身的子节点

内容的提问来源于stack exchange，提问作者schumiel