【发布时间】：2018-04-08 19:07:10
【问题描述】：
我正在尝试复制从才华横溢的网页设计师 Nathan Riley (https://nrly.co/) 那里找到的滚动动画。
我通过一些小代码从 html 更改 svg 过滤器代码中的属性非常容易地实现了这一点。但问题是，在移动设备上查看页面时，动画非常缓慢且滞后。
我写的代码：
html 过滤器：
<svg>
<defs>
<filter id="liquify">
<feturbulence basefrequency="0" numoctaves="3" result="warp" type="fractalNoise"></feturbulence>
<fedisplacementmap in="SourceGraphic" in2="warp" scale="100" xchannelselector="R" ychannelselector="B"></fedisplacementmap>
</filter>
</defs>
</svg>
在css中应用过滤器：
.liquify {
filter: url(#liquify);}
使用 scrollTop 制作动画的 jQuery 代码：
function liqScroll() {
var scrollTop = $(window).scrollTop();
$("#liquify > feTurbulence").attr({
'baseFrequency' : +scrollTop / 100000,
});};
你们知道如何解决/解决滞后问题吗？
sitenote：在 Firefox 上，我在控制台中收到以下消息，这可能与它有关：
此站点似乎使用了滚动链接定位效果。这可能不适用于异步平移；请参阅https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects 了解更多详情并加入有关相关工具和功能的讨论！
【问题讨论】：
-
每次使用脚本监控滚动和定位元素时，都会看到此 Firefox 警告。移动设备通常不使用对
scroll事件的直接监控，而是在事件发生 之后进行所有计算 - 这就是您看到滞后的原因。 -
所以 nrly.co 投资组合在移动设备上运行良好。他的伎俩是什么/我该如何解决？
-
其实我才发现firefox的警告跟这个没有关系。它出现在我用来淡出滚动元素的另一个函数中。