Changements de DOM JavaScript dans touchmove retardé jusqu'à ce que le rouleau se termine sur mobile Safari

Dans le navigateur safari mobile, dans le cadre de la manipulation touchmove pour un élément, je change le className de cet élément. Malheureusement, le visuel, le changement ne se produit pas pendant que l'utilisateur fait défiler, ou jusqu'à la fin d'un défilement à inertie.

Que puis-je faire pour obtenir le className visuellement prendre immédiatement?

Plus: Apparemment ce n'est pas limité à className changements, mais apparemment toute modification du DOM, comme innerHTML et style.

source d'informationauteur Hilton Campbell

  1. 13

    C'est par la conception, malheureusement. iOS safari de file d'attente toutes les manipulations du DOM, jusqu'à la fin d'un rouleau ou d'un geste. Effectivement le DOM est gelé pendant un parchemin.

    Je pensais que je pouvais trouver une référence sur un des développeurs d'apple à la page, mais je ne peux que trouver ce lien pour jQueryMobile: http://jquerymobile.com/test/docs/api/events.html.

    Noter que les appareils iOS gel de manipulation du DOM au cours de défilement, de file d'attente
    pour appliquer quand le livre se termine. Nous sommes en train d'enquêter
    des moyens pour permettre les manipulations DOM appliquer avant de défilement commence

    Espérons que cette aide!

  2. 15

    J'en ai construit ce site, et oui, le moyen de contourner cette limitation est de ne pas faire défiler le site en utilisant le navigateur intégré les fonctionnalités, mais faux. La JS écoute de la molette de défilement et les événements de clavier et les interpolations de la css en haut de la propriété du conteneur principal de sa propre "scrollTop'. La barre de défilement sur la droite est bien sûr une coutume JS. Dans ce cas, son synchronisés sur le même interne " scrollTop de valeur.

    L'ensemble du site est juste un gros interpolation vraiment, avec le scénario principal étant son scrollTop position, et tous les sous animations être déclenchée à certains moments. Le JS n'est pas minimisé afin de prendre un coup d'oeil dans le ScrollAnimator.js fichier, tout y est.

  3. 3

    Simplement changer de position pour -webkit-sticky. Ne définissez pas top donc à chercher comme un élément normal, mais se comporte comme un élément fixe. Et vous pouvez mettre à jour son style à l'exception de la position immédiatement.