Question

我有svg行：

<svg class="filling" width="500" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path data-over-line="" d="M90,5 L500,5" stroke="#e2e2e2" fill="transparent" stroke-width="4" style="stroke-dashoffset: 0px;"></path>
</svg>

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

Answer 1

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

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

SVG（稍加修改）：

<svg class="filling" width="500" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <line x1="90" y1="5" x2="500" y2="5" stroke="#e2e2e2" fill="transparent" stroke-width="4" />
    <line x1="90" y1="5" x2="90" y2="5" stroke="blue" fill="transparent" stroke-width="4" id="scrollprogress" />
</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);
}

Demo fiddle

滚动时如何填充svg

1 个答案: