在元素的多个实例上触发相同的滚动事件 - vanilla javascript

问题描述

当我向下滚动页面时，我试图让 3 个单独的动画移动。 所有这些行为都是相同的，所以我尝试使用 forEach。

const svgContainer = document.querySelectorAll('.svg-container')
const textPath = document.querySelectorAll('.text-path')
const path = document.querySelectorAll('#wave');
const pathLength = path.getTotalLength();

const moveText = () => {
    requestAnimationFrame(function() {
        let scrollPercent;
        svgContainer.forEach(x => {
            scrollPercent = x.getBoundingClientRect().y / window.innerHeight;
        })
        textPath.forEach(x => {
            x.setAttribute('startOffset',scrollPercent * pathLength);
        })
    })
}
window.addEventListener('scroll',moveText);

但是这不起作用 - 请在此处查看完整代码：https://jsfiddle.net/chunzg/knr2y4ft/13/

（“标题 1”、“标题 2”和“标题 3”应在向下滚动时从屏幕的右向左水平移动，向上滚动时应从左向右移动）

然后我尝试了一种不同的方法，为每个实例添加不同的类名，并使用 querySelectorAll 获取所有类名：

const svgContainer = document.querySelectorAll('.svg-container-1,.svg-container-2,.svg-container-3')
const textPath = document.querySelectorAll('.text-path-1,.text-path-2,.text-path-3')
const path = document.querySelectorAll('#wave-1,#wave-2,#wave-3');
const pathLength = path.getTotalLength();

const moveText = () => {
    requestAnimationFrame(function() { 
        var rect = svgContainer.getBoundingClientRect();
        var scrollPercent = rect.y / window.innerHeight;
        textPath.setAttribute('startOffset',scrollPercent * pathLength);
    })
}
window.addEventListener('scroll',moveText);

但也不起作用：https://jsfiddle.net/chunzg/py0gox1n/16/

我哪里出错了？

我能想到的唯一另一种方法是分别为每个标题重复脚本，但这不会是干代码吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）