Javascript Girl
  1. Javascript Girl
  3. "Onscroll" a-t-il été tiré ou avant de repeindre?
Intereting Posts
Bouton de commande JSF activé / désactivé basé sur la case à cocher JSF à l'aide de javascript Comment faire des migrations knex.js? Copier le texte JavaScript dans le presse-papiers Chrome: JavaScript window.open pour être sauvegardé Appel de fonction de support carré JavaScript Iframe volant des événements de souris Comment convertir le nom de la variable en chaîne en JavaScript? L'événement onchange sur le type d'entrée = la plage ne déclenche pas dans Firefox lorsque vous traînez La liaison des fichiers javascript dans le corps plutôt que dans l'en-tête entraînera-t-elle un problème? Capturez deux groupes de nombres avec une expression régulière Acces Prestashop webservice de JavaScript Comment résoudre les problèmes de dépendance avec l'application AngularJS intégrée? Accès <div> à partir de javascript et code-behind Comment changer la page actuelle de Phantomjs à l'aide de boutons? Error document.form est indéfini en javascript

"Onscroll" a-t-il été tiré ou avant de repeindre?

J'ai une barre de défilement sur un élément div.

Sur plusieurs navigateurs (j'ai testé ceci sur les versions récentes de Chrome et Firefox sur MacOS et Linux), il semble que les navigateurs s'assurent que le code lié à onscroll est appelé avant le reptage déclencher par le défilement.

En d'autres termes, le violon suivant ne clignote pas et clignote lorsque vous défilez http://jsfiddle.net/m2E65/1/ : 

var onscroll = function() { var y = $("#container").scrollTop() + 30; var z = 0 for (var c=0; c<y*10000; c++) { z+=c; } $("#label").text("bocal : "+z); $("#label").css("top", y); }; $('#container').scroll(onscroll);

Cependant, sur Linux Chromium v28 sur Ubuntu, il brille. Presque aussi peu que si nous avons différé onscroll en utilisant setTimeout ( http://jsfiddle.net/m2E65/2/ ): 

 $('#container').scroll(function() { window.setTimeout(onscroll, 0); });

Sur ce même navigateur, même en utilisant requestAnimationFrame comme dans http://jsfiddle.net/m2E65/4/ scintille aussi mal (voir ci-dessous) 

 var onscroll = function() { var y = $("#container").scrollTop() + 30; var z = 0 for (var c=0; c<y*10000; c++) { z+=c; } $("#label").text("bocal : "+z); $("#label").css("top", y); window.requestAnimationFrame(onscroll); }; window.requestAnimationFrame(onscroll);

Ma question est :

  • Existe-t-il une spécification pour cela?
  • Existe-t-il un moyen de s'assurer que sur tous les navigateurs, le code sera exécuté avant de repousser?
  • Point bonus: quel est le rythme de ce comportement?

1. Out of Document Object Model (DOM) Niveau 3 Spécifications des événements Document W3C:

Un agent utilisateur doit expédier cet événement lorsqu'une vue de document ou un élément a été déroulé . Ce type d'événement est expédié après l'apparition du défilement.

Mon interprétation de ces deux phrases est qu'un navigateur doit expédier l'événement de scroll après le processus de défilement complété, y compris la peinture.

2. Je ne pense pas qu'il existe un moyen de garantir que, sur tous les navigateurs, le code disparaîtra avant le repeint. Peut-être que vous pourriez tenter d'attraper toutes les façons dont un utilisateur peut défiler, spontanément, je pensais:

  • Une roue de souris -> l'événement de wheel
  • En sélectionnant le texte -> mousedown
  • En utilisant une barre de défilement -> vous pouvez espérer que mousedown déclenchera.

3. Votre premier violon me clignote sur:

  • Safari 7.0.1
  • Safari sur iOS 7
  • Comme vous l'avez dit dans Chrominum sur Ubuntu

Il ne clignote pas dans:

  • Firefox 27.0 Mac et Ubuntu
  • Opera 19.0 Mac
  • Chrome

Maintenant, il pense que spécialement WebKit-Browsers (sauf Chrome) ne pas repeindre avant d'appeler l'événement de scroll et qu'il n'y a pas de bon moyen d'éviter cela.