我对此感到非常困难，所以我想看看这里是否有人能够帮助我思考这个问题。
我正在尝试将滚动侦听器附加到特定像素范围之间的 SVG 路径，因此当您上下滚动时它会来回绘制。
我一直在研究这几天，我发现了有关将笔画 dashoffset 进度转换为基于窗口顶部或文档高度的百分比作为单个数字的主题，但似乎无法包装我的关于如何将相同的逻辑应用于指定的像素范围。
我如何让 svg 路径的 stroke-dasharray 在像素范围的开始处处于其起始值 (3000)（比如从文档顶部开始的 2500px 到 3000px。），并且 stroke dasharray 的最终值是 6000 （它的最终值）在像素范围的末尾？我真的希望这不是一个我只是盯着太久的愚蠢简单的问题。这是我所拥有的：
var path = document.querySelector('path');
var length = path.getTotalLength();
var triggerPadding = 600;
var startLocation = document.querySelector('.scroll-container').getBoundingClientRect()
var bodyRect = document.body.getBoundingClientRect();
var elemRect = document.querySelector('.scroll-container').getBoundingClientRect();
var elementYLocation = elemRect.top - bodyRect.top;
var elementBottomYLocation = Math.round((elemRect.bottom - bodyRect.top) - triggerPadding);
var startTrigger = Math.round(elementYLocation - triggerPadding);
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
//
function animationScroll(currentY, startY, endY) {
console.log({ currentY, startY, endY })
if (currentY >= startY) {
//do animation
}
}
window.addEventListener('scroll', function () {
const currentY = window.pageYOffset || window.scrollY;
animationScroll(currentY, startTrigger, elementBottomYLocation);
}, false);
对于我需要这样做的方程式的任何帮助将不胜感激。先感谢您。