Ionic で構築された HTML5 アプリ (Cordova を使用) で、stellar.js と iscroll-probe.js (iScroll 5 の一部) を使用して、モバイル デバイスでのスクロールを処理しています。
私の問題は、変換を使用してスクロールするように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 + ")";
それでも上書きされ、実際にはアニメーションが悪化します。
どんな助けでもいただければ幸いです