Événement qui est déclenché avant (pas après!) Les éléments DOM sont déroulés en javascript

Question

Fondamentalement, je voudrais faire un pré-traitement avant que les éléments DOM ne défilent. Le problème est que l'événement scroll est déclenché APRÈS le défilement des éléments DOM. Je sais que lorsque vous utilisez la molette de la souris pour faire défiler, l'événement de roulette mousewheel est déclenché avant que les éléments DOM ne défilent, bien qu'il ne vous fournisse pas la position de défilement anticipée et il ne s'agit que d'un type de défilement. Je me demande s'il y a un événement qui se déclenche pour chaque méthode de défilement (par exemple, mousewheel, en faisant glisser la barre de défilement, en poussant la flèche vers le bas, etc.) AVANT que les éléments DOM ne défilent. Ce ne doit pas être un événement. Je n'essaie pas de faire défiler jusqu'à une certaine position afin que scrollTo ne soit pas applicable.

La chaîne de l'événement avec le défilement: utilisateur fait défiler -> éléments DOM défiler physiquement -> déclenche l'événement OnScroll -> stuff poignée

La chaîne souhaitée de l'événement: utilisateur fait défiler -> un événement est capturé et fais ce que je veux faire -> éléments DOM défilement physique -> déclenche l'événement OnScroll -> stuff poignée

Answer 1

Voici quelque chose que vous pourriez vouloir essayer.

Donnez à votre page overflow:hidden de sorte qu'aucune barre de défilement n'apparaisse, puis placez une div absolument positionnée avec la largeur correcte & hauteur sur le contenu. Lorsque cette div est défilée, vous pouvez ensuite mettre à jour tout contenu sous-jacent avant de re-déclencher l'événement.

Vous devez également passer par des clics, etc., donc c'est vraiment un hack. Quelque chose comme jQuery aiderait à déclencher les événements et à mesurer la hauteur du contenu.

EDIT: css pointer-events:none peut vous aider en fonction de votre navigateur. Voir https://developer.mozilla.org/en/css/pointer-events

Answer 2

le mieux que vous pouvez faire est quand onScroll feux, si scrollTop>thingToStick la distance d » à partir du haut, puis définissez position: fixed sur thingToStick sinon, réglez position sur ce qu'il était à l'origine y. Ça va scintiller en changeant de coller à coller, mais à part ça, vous n'obtiendrez aucun scintillement.

dans le code-ish sudo:

onScroll = function() 
{ 
    if(scrollTop > thingToStick.y) 
     thingToStick.position = "fixed"; 
    else 
     thingToStick.position = "relative"; 
} 

Dans les navigateurs qui ne prennent pas en charge fixed positionnement, vous êtes coincé avec le scintillement ...

Answer 3

jamais tryed avant, mais de briser les chaîne de cas, il serait possible de:

1. capture l'événement de défilement
2. Faites vos trucs
3. Utilisation preventDefault() et stopPropagation pour inhiber l'événement
4. Faux un nouvel événement de défilement en utilisant l'original (cela devrait être possible, je pense)

Hope cela vous aidera.