作者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/cn.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