React：如何用单个JavaScript函数控制多ID滚动托盘的左右滑动

问题描述 #

我有一个可正常运行的JavaScript函数，能够改变滚动托盘的位置，实现左右滑动。但我有5个这类滚动托盘，目前需为每个托盘编写不同命名的slideLeft和slideRight函数，传入不同ID通过document.getElementById获取对应元素。请问能否仅用一组slideLeft和slideRight函数，让它们根据ID识别要操作的滚动托盘？现有代码如下：

export function slideRight() {
    let container = document.getElementById('scroll-tray-1')
    sideScroll(container, 'right', 25, 400, 40);
};

export function slideRight() { // 此处函数名重复，应为slideLeft
    let container = document.getElementById('scroll-tray-2')
    sideScroll(container, 'left', 25, 400, 40);
};

function sideScroll(element, direction, speed, distance, step) {
    let scrollAmount = 0;
    var slideTimer = setInterval(function () {
        if (direction === 'left') {
            element.scrollLeft -= step;
        } else {
            element.scrollLeft += step;
        }
        scrollAmount += step;
        if (scrollAmount >= distance) {
            window.clearInterval(slideTimer);
        }
    }, speed);
}

解决方案 #

完全可以通过给滑动函数添加ID参数实现复用，无需为每个托盘单独编写函数。修改后的代码如下：

// 通用向右滑动函数，接收托盘ID作为参数
export function slideRight(trayId) {
    const container = document.getElementById(trayId);
    if (!container) return; // 避免传入无效ID时触发错误
    sideScroll(container, 'right', 25, 400, 40);
};

// 通用向左滑动函数，接收托盘ID作为参数
export function slideLeft(trayId) {
    const container = document.getElementById(trayId);
    if (!container) return; // 避免传入无效ID时触发错误
    sideScroll(container, 'left', 25, 400, 40);
};

function sideScroll(element, direction, speed, distance, step) {
    let scrollAmount = 0;
    const slideTimer = setInterval(function () {
        if (direction === 'left') {
            element.scrollLeft -= step;
        } else {
            element.scrollLeft += step;
        }
        scrollAmount += step;
        if (scrollAmount >= distance) {
            window.clearInterval(slideTimer);
        }
    }, speed);
}

使用方式 #

调用时只需传入对应滚动托盘的ID即可：

// 操作第一个托盘向右滑动
slideRight('scroll-tray-1');
// 操作第二个托盘向左滑动
slideLeft('scroll-tray-2');
// 操作第五个托盘向右滑动
slideRight('scroll-tray-5');

额外优化说明 #

• 添加if (!container) return判断，避免无效ID导致的运行错误
• 将var替换为const，符合现代JavaScript语法规范

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