Question

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

我的问题是我告诉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 + ")";

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

任何帮助将不胜感激

对当前转换元素应用缩放变换

0 个答案: