滚动时如何填充svg

我有svg行：

我需要在滚动页面时逐渐填充不同的颜色。 怎么做？

Answer 1

我不确定你最终想要什么样的滚动条，但这是一个简单的解决方案。 我们在您的灰线上绘制一条蓝线以指示滚动进度。 线的长度是通过计算我们滚动页面的距离来确定的。

如果您最终希望滚动条不是直线或矩形，则需要采用不同的方法。

SVG（修改了一下）：

JS：

 window.onscroll = function (event) { var offset = window.pageYOffset; var wheight = window.innerHeight; var html = document.documentElement; var docheight = Math.max(document.body.scrollHeight, document.body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); var progress = offset / (docheight - wheight); // Give the line a CSS gradient based on scroll position document.getElementById("scrollprogress").setAttribute("x2", 90 + progress * 410); } 

演示小提琴