Stop SVG scroll animation from reverse
On the site I'm currently building, I have an SVG path that is basically a straight line. As the user scrolls down the page, this path shrinks the page until the user is at 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 very well, however, currently when the user scrolls through the backup page the SVG path "reverses" the backup with it. My desired effect is that the svg only pulls the page and doesn't go back when the user scrolls through the fallback page.
Does anyone know how to edit the script above to achieve this desired behavior?
source to share
I changed a bit to a script and now it 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 summarize, I added lastScrollpercent
and set it to 0. When the page is scrolled, it outputs the current percentage that it was scrolling, and only draws anything if it is currently greater than lastScrollpercent
, which then updates (this value scrollpercent
was last drawn). If the current scroll percentage is less then it just returns (does nothing). This way, if you scroll up, it stops drawing, and if you then scroll down, it only continues from where it left off.
source to share