我正在使用 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 + ")";
但它没有帮助,它仍然会覆盖,它实际上使动画变得更糟。
任何帮助,将不胜感激