停止 SVG 滚动动画反转

Question

在我目前正在构建的网站中，我有一个 SVG 路径，它基本上是一条直线。当用户向下滚动页面时，此路径会向下绘制页面，直到用户点击页面底部。

我用于此的代码取自此页面https://www.w3schools.com/howto/howto_js_scrolldrawing.asp

可以在这里看到：

       <svg style="min-height: 113.5%;" version="1.1" id="line_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="4px" height="113.5%" xml:space="preserve">
<path style="max-height: 113.5%;" id="blue_line" fill="freeze" stroke-width="4" stroke="#3b7fdc" d="M0 0 v2884 400" />
</svg>
     <script>
   // Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("blue_line");
var length = triangle.getTotalLength();

// The start position of the drawing
triangle.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);

function myFunction() {
    var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

    var draw = length * scrollpercent;

    // Reverse the drawing (when scrolling upwards)
    triangle.style.strokeDashoffset = length - draw;
}

这确实很好用，但是，目前，当用户向上滚动页面时，SVG 路径会“反转”并使用它来备份页面。我想要的效果是 svg 只绘制页面并且在用户向上滚动页面时不反转。

有谁知道如何编辑上面的脚本来实现这种期望的行为？

Answer 1

我对脚本做了一些小改动，现在它可以满足您的需要...

<script>
// Get the id of the <path> element and the length of <path>
var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

// The start position of the drawing
triangle.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;

// Find scroll percentage on scroll (using cross-browser properties), and offset dash same amount as percentage scrolled
window.addEventListener("scroll", myFunction);
var lastScrollpercent = 0;
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  if (scrollpercent < lastScrollpercent) return;
  lastScrollpercent = scrollpercent;

  var draw = length * scrollpercent;

  // Reverse the drawing (when scrolling upwards)
  triangle.style.strokeDashoffset = length - draw;
}
</script>

总而言之，我添加了 lastScrollpercent 并将其设置为 0。当页面滚动时，它会计算出当前已滚动的百分比，并且仅在当前大于 lastScrollpercent 时才绘制任何内容，然后更新（这是上次绘制任何东西时scrollpercent 的值）。如果当前滚动百分比较小，则它只会返回（什么都不做）。这样，如果你向上滚动，它就会停止绘制，如果你再次向下滚动，它只会从它停止的地方继续。