カスタム css プロパティのサポートが広まりつつある今、スクロール ベースのアニメーションの作成を簡素化するためにそれらを使用することを念頭に置いていました。Javascript では、style.setProperty('--customProperty', value) を使用して、ユーザーがスクロールするときに特定の要素のカスタム プロパティを調整しています。
Chrome、Firefox、Safari 10 で美しく動作します。
しかし、(カスタム プロパティをサポートしている) Safari 9.1 では、プロパティを1 回しか設定できません。設定後、新しい値に更新されることはありません。
私はCodePenでそれをすべて持っています: https://codepen.io/kirkhadden/pen/JJbXmE/
// Have we scrolled since the last frame?
if (position != wrapper[0].scrollpos) {
// Keeps updating accurately every frame:
window.log.text(position);
// Only happens on the first frame:
wrapper[0].style.setProperty('--scrollpos', position+'px', '');
wrapper[0].scrollpos = position;
} else { // No Change
return false;
}
この動作に関する情報も言及も見つかりません。Safari で style.setProperty() の他のより単純な使用法をテストしましたが、プロパティが設定されると、最初にプロパティを削除しようとしても、Safari が同じプロパティを更新しないことが引き続きわかりました。
これは Safari 9.1 のバグですか? 回避策はありますか? javascript を使用して css 変数を設定する別の方法はありますか?
アップデート
したがって、style.setProperty の代わりに、jQuery の .attr() メソッドを使用してプロパティを設定できます。他のスタイル プロパティが上書きされるため、理想的ではありませんが、この場合は機能します。
より大きな問題は、このソリューション全体が、アニメーション化されたすべての要素に通常の css アニメーションを設定するという考えに基づいていることですが、再生状態を「一時停止」に設定し、javascript を使用してスクロール位置に応じてアニメーション遅延を操作します。 . これにより、継承を利用して、最小限の DOM 操作で多くのものをアニメーション化できます。
繰り返しますが、Safari 9.1 は障害です。Chrome や Firefox とは異なり、再生状態が「一時停止」の場合、Safari はアニメーションをまったく開始せず、アニメーションの遅延を無視するように見えるためです。