作者G4321 (小胖囉)
看板Web_Design
標題[問題] 關於卷軸高度的計算(附P幣)
時間Fri Mar 22 15:03:14 2019
就是滾輪往下滑的時候 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://webptt.com/m.aspx?n=bbs/Web_Design/M.1553238197.A.235.html
1F：推 pkro12345: 分母是整個網頁的高度減目前瀏覽器的高度等於全部可滾 03/22 17:13
2F：→ pkro12345: 動的高度 03/22 17:13
3F：→ pkro12345: 分子兩個都是已滾動的高度 其中一個為0 純粹是支援某 03/22 17:17
4F：→ pkro12345: 些瀏覽器的差異 03/22 17:17
5F：→ pkro12345: 所以滑越多越接近1 03/22 17:20
6F：推 shter: 我看了一下，請問你是想要做類似我下面這種 DEMO 效果? 03/22 22:14
8F：推 shter: 如果是的話，那是用 position:absolute 配合 left top 值 03/22 22:18
9F：→ shter: 去改動目前看的座標點，讓畫面 focus 在 path 畫到的位置 03/22 22:19