如何解决在元素的多个实例上触发相同的滚动事件 - 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 举报,一经查实,本站将立刻删除。