4

我正在使用 stellar.js 和 iscroll-probe.js(iScroll 5 的一部分)在使用 Ionic(使用 Cordova)构建的 HTML5 应用程序中处理移动设备上的滚动。

我的问题是我告诉 stellarJs 使用转换滚动

scrollProperty: 'transform',

现在,当页面位于顶部并且用户将其向下拖动时,我将 css 比例应用于元素,使其增长。

document.getElementById('imageHolder').style["-webkit-transform"] = "matrix(" + scaleVar + ", 0, 0, " + scaleVar + ", 0, 0)";

这会缩放它,但有闪烁。这是因为 Stellar.js 不断地用

translate3d(0px, -5px, 0px) 

(如果页面向下 5 px)

如果我控制台记录我的转换值,我会得到如下信息:

matrix(1.02, 0, 0, 1.02, 0, 0) 
translate3d(0px, -1px, 0px) 
translate3d(0px, -0.5px, 0px) 
matrix(1.00666666666667, 0, 0, 1.00666666666667, 0, 0) 
translate3d(0px, 0px, 0px) 

知道如何克服这个问题吗?我可以附加转换吗?

我试过了

"matrix(" + cssVar + ", 0, 0, " + cssVar + ", 0, " + this.y / 2 + ")";

但它没有帮助,它仍然会覆盖,它实际上使动画变得更糟。

任何帮助,将不胜感激

4

0 回答 0