停止SVG滚动动画反向播放

Question

停止SVG滚动动画反向播放

3

在我目前正在构建的网站上，有一条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只能在页面上绘制，并且在用户向上滚动页面时不会逆转。

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

- Tommy Newbold

当用户滚动到页面的一半，然后向上滚动，再次开始向下滚动时，您希望发生什么？ - Reinstate Monica Cellio

在这种情况下，如果可能的话，我希望SVG路径在页面中途停止，不会随用户反向滚动，然后在用户滚过其初始停止点（在本例中为页面中央）时继续向下绘制。 - Tommy Newbold

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Reinstate Monica Cellio · Accepted Answer

我对脚本进行了轻微的修改，现在它可以满足你的需求...

<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的值)。如果当前的滚动百分比小于此值，则什么都不做，直接返回。这样，如果你向上滚动，它就停止绘制；如果你再向下滚动，它就会从离开的地方继续绘制。