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

作者: G4321 (小胖囉)   2019-03-22 15:03:14
就是滾輪往下滑的時候 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元給第一個解惑的朋友 謝謝您
作者: pkro12345 (席龍)   2019-03-22 17:13:00
分母是整個網頁的高度減目前瀏覽器的高度等於全部可滾動的高度分子兩個都是已滾動的高度 其中一個為0 純粹是支援某些瀏覽器的差異所以滑越多越接近1
作者: shter (飛梭之影)   2019-03-22 22:14:00
我看了一下,請問你是想要做類似我下面這種 DEMO 效果?https://melixyen.github.io/fmy/rong/dw.html如果是的話,那是用 position:absolute 配合 left top 值去改動目前看的座標點,讓畫面 focus 在 path 畫到的位置

Links booklink

Contact Us: admin [ a t ] ucptt.com