如何仅滚动绘制div的长度？

Question

[嗨，我正在看W3Schools和CSS Tricks上的滚动绘图示例。这两个示例都使用Javascript和SVG路径来“绘制”滚动中的元素。它们还根据文档主体已滚动了多少（滚动百分比）来确定绘制路径的长度。这是他们计算滚动百分比的方法：

var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

有人知道我如何更改滚动百分比，以便它根据div向下滚动的距离进行计算吗？

这里是Fiddle，我尝试使用div的boundingClientRect（）的y除以window.innerHeight的值。这可能没有意义，因为它似乎一遍又一遍地绘制，但我正在尝试弄清楚数学。在这种情况下，SVG会粘在div上（而不是固定的）。这种唯一的工作方式是在滚动条上绘制SVG路径，但是会一遍又一遍地绘制，直到滚动到div的高度为止。

我希望得到的结果是，在div向下滚动50％时完全绘制一次，并在滚动div的其余50％时保持绘制状态。

我希望这是有道理的。谢谢您的帮助！在JS数学和逻辑方面，任何参考也将有所帮助！

此外，对于SVG本身，您知道路径的哪一端是起点吗？

Answer 1

好的，我知道了。这是完整的fiddle

用于计算滚动百分比的数学方法：获取窗口已滚动的量并除以div的高度（SVG位于其中）。然后，您想将其分成两半，以便在div完成滚动之前完成绘制的一半：

var svgContainer = document.getElementById("svg-container");
var svgContainerRect = svgContainer.getBoundingClientRect();
var svgDivHeight = svgContainerRect.height;
var windowScroll = window.pageYOffset;

var scrollPercent = windowScroll / svgDivHeight *2;

然后，要使图形在div中途滚动后仍保持“绘制”状态，请将“绘图功能”放入“ if”中。一旦滚动百分比达到1（到达页面的一半），这将停止绘制：

if (scrollPercent < 1) {

  //draw the length of SVG path according to the scroll
  var draw = length * scrollPercent;
  // Reverse the drawing (when scrolling upwards)
  triangle.style.strokeDashoffset = length - draw;

} else {
    var still = length;
}

唯一的怪癖是，当图形反转时（当您向上滚动然后向下滚动时），它似乎并没有完全完成，就像缺少一些长度一样。还需要弄清楚，但主要功能在那里。

我想我花了一段时间才弄清楚简单的数学。希望这可以对以后的人有所帮助。