[問題] 關於卷軸高度的計算(附P幣)

[G4321 (小胖囉)]

就是滾輪往下滑的時候  SVG的線會跟著卷軸一起往下移動 會有往外延伸的感覺

codepen網址:
https://codepen.io/bearman123/pen/PLxMXw?editors=1010


原理我都懂  先讓 strokeDasharray strokeDashoffset的數值跟SVG的長度一樣 才能全
部遮蔽

之後要讓卷軸的高度 去配合元素的高度一起連動

但我實在是有看沒有懂  有沒有高手可以幫忙解惑一下 是怎樣的計算方式

$(window).scroll(function () {
  var scrollPercentage = (document.documentElement.scrollTop + document.body.s
crollTop) / (document.documentElement.scrollHeight - document.documentElement.
clientHeight);

  var drawLength = pathLength * scrollPercentage;

  path.style.strokeDashoffset = pathLength + drawLength;


附上P幣500元給第一個解惑的朋友 謝謝您

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 115.82.236.83
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1553238197.A.235.html
推 pkro12345: 分母是整個網頁的高度減目前瀏覽器的高度等於全部可滾
→ pkro12345: 動的高度
→ pkro12345: 分子兩個都是已滾動的高度 其中一個為0 純粹是支援某
→ pkro12345: 些瀏覽器的差異
→ pkro12345: 所以滑越多越接近1
推 shter: 我看了一下，請問你是想要做類似我下面這種 DEMO 效果?
→ shter: https://melixyen.github.io/fmy/rong/dw.html
推 shter: 如果是的話，那是用 position:absolute 配合 left top 值
→ shter: 去改動目前看的座標點，讓畫面 focus 在 path 畫到的位置