如何用JavaScript为每个滚动容器独立设置CSS关键帧变量值？

当然可以通过JavaScript为每个容器独立设置CSS变量，这正是适配不同高度内容实现无缝滚动的最优方案。不过首先得修正你原CSS里的两处语法错误：

1. CSS自定义变量必须以--开头，var(100px)是无效写法，需要定义一个如--scroll-distance的变量；
2. 动画声明需要完整的animation:前缀。

修正后的基础CSS #

@keyframes scroll {
    0% {
        transform: translateY(0);
    }
    100% {
        /* 使用自定义变量，乘以-1实现向上滚动，默认值设为0 */
        transform: translateY(calc(-1 * var(--scroll-distance, 0)));
    }
}

.scroll-container {
    animation: scroll 10s linear infinite;
    overflow: hidden;
    /* 可选：固定容器高度，根据需求调整 */
    height: 300px;
}

JavaScript实现独立变量设置 #

遍历所有.scroll-container元素，获取每个容器的内容总高度（scrollHeight），并将其赋值给当前容器的--scroll-distance变量。另外要注意：为了实现真正的无缝循环，需要复制一份容器内的内容追加到末尾，否则滚动到内容底部时会出现空白间隙。

document.querySelectorAll('.scroll-container').forEach(container => {
    // 获取容器内所有内容的总高度
    const totalContentHeight = container.scrollHeight;
    // 为当前容器设置独有的CSS变量
    container.style.setProperty('--scroll-distance', `${totalContentHeight}px`);
    
    // 复制内容并追加，实现无缝滚动
    const contentCopy = container.firstElementChild.cloneNode(true);
    container.appendChild(contentCopy);
});

原理说明 #

每个容器的--scroll-distance变量是通过行内样式设置的，属于元素级别的独立属性，因此动画会各自读取对应容器的变量值，完美适配不同高度的图片列表，实现独立的垂直循环滚动效果。

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