从反转停止SVG滚动动画

Question

In the site that I am currently building I have an SVG path which is basically a straight line. When the user scrolls down the page, this path draws down the page until the user hits the bottom of the page.

The code I am using for this is taken from this page https://www.w3schools.com/howto/howto_js_scrolldrawing.asp

and can be seen here:

       <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;
}

This works really well, however, currently, when the user scrolls back up the page, the SVG path 'reverses' back up the page with it. My desired effect is for the svg to only draw down the page and to not reverse when the user scrolls back up the page.

Does anyone know how to edit the script above to achieve this desired behaviour?

Answer 1

I've made a slight change to the script and it now does what you need...

<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>

To summarise, I added lastScrollpercent and set it to 0. When the page is scrolled it works out the current percentage that it's been scrolled and only draws anything if that is currently more than lastScrollpercent , which it then updates (it's the value of scrollpercent last time anything was drawn). If the current scroll percent is less then it just returns (does nothing). That way, if you scroll up then it stops drawing, and if you then scroll down again it will only continue from where it left off.