如何修复滚动 svg 路径 JavaScript答案

【问题标题】：How to fix a scroll svg path JavaScript如何修复滚动 svg 路径 JavaScript
【发布时间】：2023-02-26 03:01:14
【问题描述】：

我正在关注 YouTube 视频，所以我不太确定我的问题是什么，我只知道它无法正常工作。当我向下滚动时，我的 svg 矢量突然出现在屏幕上，而不是逐渐出现在屏幕上。

  <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Svg Scroll</title>
        <link rel="stylesheet" href="style.css">
    </head>
    
    <body>
    
        <h1>Scroll down</h1>
        <svg id="vectorSvg" viewBox="0 0 1459 1350" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path id="vectorPath" d="M1359.5 99.5H99.5V668H1359.5V1251H99.5" stroke="black" stroke-width="198" />
        </svg>
    
    </body>
    <script>
        var path = document.querySelector('#vectorPath');
        var pathLength = path.getTotalLength();
    
        path.style.strokeDasharray = pathLength + ' ' + pathLength;
        path.style.strokeDashoffset = pathLength;
        path.getBoundingClientRect();
        window.addEventListener('scroll', function (e){
            var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
                var drawLength = pathLength * scrollPercentage;
                path.style.strokeDashoffset = pathLength - drawLength;
    
            if(scrollPercentage >= .99){
                path.style.strokeDasharray = 'none';
            }
    
            else{
                path.style.strokeDasharray = pathLength + ' ' + pathLength;
            }
        });
    </script>
    
    </html>

【问题讨论】：

您的脚本按预期工作。可能，您的 svg 高度与您实际布局中的页面高度不匹配，或者您的滚动高度/范围太小，因此笔划将立即达到 100%。

标签： javascript html css svg scroll

【解决方案1】：

这可以通过设置 dasharray 而不是 dashoffset 来简化一点。并且还通过设置 pathLength 属性。

然后高度也很重要。在这里，我添加了更多的转弯。

var path = document.querySelector('#vectorPath');
var body = document.body,
  html = document.documentElement;
  
window.addEventListener('scroll', function(e) {
  let scrollPercentage = (html.scrollTop + body.scrollTop) / (html.scrollHeight - html.clientHeight);
  let drawLength = 100 * scrollPercentage;
  path.style.strokeDasharray = `${drawLength} 100`;
});

<h1>Scroll down</h1>
<svg id="vectorSvg" viewBox="0 0 1500 3800" fill="none"
  xmlns="http://www.w3.org/2000/svg">
  <path id="vectorPath" d="M 1500 100 H 100 V 700 H 1400 V 1300
    H 100 V 1900 H 1400 V 2500 H 100 V 3100 H 1400 V 3700 H 0"
    stroke="black" stroke-width="200" pathLength="100"
    stroke-dasharray="0 100" />
</svg>

【讨论】：