Faites défiler écouteur d'événement javascript

Est-il un js auditeur lorsqu'un utilisateur fait défiler dans une certaine zone de texte qui peut être utilisé? Un peu comme onclick sauf pour le défilement. J'ai vu HTML5 écouteur d'événement pour la saisie du numéro de défilement - Chrome seulement mais qui semble être pour chrome seulement. Je suis à la recherche de quelque chose de la croix-navigateur.

if (jQueryIsAllowed) api.jquery.com/scroll

InformationsquelleAutor Kpower | 2012-09-21

javascript

102

Pour ceux qui trouve cette question en espérant trouver une réponse qui n'implique pas de jQuery, vous intervenez dans le window "scroll" de l'événement à l'aide de la normale de l'événement à l'écoute. Disons que nous voulons ajouter de défilement de l'écoute d'un certain nombre de feuilles de style CSS sélecteur de mesure des éléments:
```
//what should we do when scrolling occurs
var runOnScroll =  function(evt) {
  //not the most exciting thing, but a thing nonetheless
  console.log(evt.target);
};

//grab elements as array, rather than as NodeList
var elements = document.querySelectorAll("...");
elements = Array.prototype.slice.call(elements);

//and then make each element do something on scroll
elements.forEach(function(element) {
  window.addEventListener("scroll", runOnScroll);
});
```
Pour les points de bonus, vous pouvez donner le défilement gestionnaire d'un mécanisme de verrouillage de sorte qu'il ne fonctionne pas si nous sommes déjà défilement:
```
//global lock, so put this code in a closure of some sort so you're not polluting.
var locked = false;
var lastCall = false;

var runOnScroll =  function(evt) {
  if(locked) return;

  if (lastCall) clearTimeout(lastCall);
  lastCall = setTimeout(() => {
    runOnScroll(evt);
    //you do this because you want to handle the last
    //scroll event, even if it occurred while another
    //event was being processed.
  }, 200);

  //...your code goes here...

  locked = false;
};
```
- Juste curieux - et vous ne savez pas si c'est important - mais devrait useCapture return false ou true pour le défilement de l'écouteur d'événement?
- n'a pas d'importance - réglage useCapture est une façon de s'assurer que le gestionnaire de la gâchette avant tout des gestionnaires d'obtenir de l'événement en raison de bulles ou "je n'aime pas à propos de l'ordre, c'est appelé" en ne définissant pas useCapture. Il n'est pas trop utile pour que, cependant, comme il n'y a pas d'ordre d'appel de garantie lorsque plusieurs auditeurs avec useCapture=true sont utilisés.
- Très propre, mais n'est-ce pas tuer de défilement de la performance car nous allons ajouter un listener sur défiler cependant, de nombreux éléments de notre sélection? Je pense qu'on aurait envie de centraliser onScroll la logique de sorte que nous pouvons gérer ce qu'il exécute. Qu'avez-vous trouvé?
- Très bien, donc pour les performances, vous pouvez en faire un standard de l'écouteur d'événement, seul un drapeau" (où le "drapeau" est juste le défilement de la valeur cible), avec une programmées indépendamment "gérer le défilement des données" fonction de ce que vous appelez sur un délai d'attente (si ce n'est pas en cours d'exécution, scroll événement démarre, si il est déjà en cours d'exécution, il annule son terme, s'il ne voit pas de nouveau défiler les données à manipuler).
- Concernant le verrouillage de vrai/faux case: ne pas le code de déclencher une seule fois (la première fois que l'utilisateur fait défiler) ??
- l'événement scroll feux de souvent que c'est effectivement hors de propos. Il sera exécuté, puis s'arrête, puis exécutez à nouveau si de défilement obtient déclenché de nouveau, où il sera. Vous pouvez bien sûr faire la serrure plus d'élaborer d'ici, avant de retourner, en fixant une valeur qui indique "exécuter une fois de plus, si nous n'obtenons pas relancée". Le code est assez facile, mais je vais le laisser comme exercice pour le lecteur, car ce n'est plus vraiment liée à cette question comme un événement général de la file d'attente de la manipulation de l'approche.
InformationsquelleAutor Mike 'Pomax' Kamermans

J'étais à la recherche d'un lot de trouver une solution pour sticy menu avec de la vieille école JS (sans JQuery). Donc j'ai construit petit essai pour jouer avec elle. Je pense que ça peut être utile à ceux qui recherchent une solution en js.
Il a besoin d'améliorations de décoller le menu en arrière, et de le rendre plus lisse.
Aussi, j'ai trouver une solution sympa avec JQuery que les clones de l'original de la div au lieu de la position fixe, de son mieux, car le reste de l'élément de la page, n'ont pas besoin d'être remplacé après la fixation. Quelqu'un sait comment faire pour que avec JS ?
Merci de la remarque, le corriger et l'améliorer.

<!DOCTYPE html>
<html>
<head>
<script>
//addEvent function by John Resig:
//http://ejohn.org/projects/flexible-javascript-events/
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
obj.attachEvent( 'on'+type, obj[type+fn] );
} else {
obj.addEventListener( type, fn, false );
}
}
function getScrollY() {
var  scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
} else if( document.body && document.body.scrollTop )  {
//DOM compliant
scrOfY = document.body.scrollTop;
} 
return scrOfY;
}
</script>
<style>
#mydiv {
height:100px;
width:100%;
}
#fdiv {
height:100px;
width:100%;
}
</style>
</head>
<body>
<!-- HTML for example event goes here -->
<div id="fdiv" style="background-color:red;position:fix">
</div>
<div id="mydiv" style="background-color:yellow">
</div>
<div id="fdiv" style="background-color:green">
</div>
<script>
//Script for example event goes here
addEvent(window, 'scroll', function(event) {
var x = document.getElementById("mydiv");
var y = getScrollY();      
if (y >= 100) {
x.style.position = "fixed"; 
x.style.top= "0";
} 
});
</script>
</body>
</html>

InformationsquelleAutor Naomi Fridman

0

L'habitude de le ci-dessous approche de base ne suffit pas à vos besoins?

Code HTML d'avoir un div
```
<div id="mydiv" onscroll='myMethod();'>
```
JS aura de code ci-dessous
```
function myMethod(){ alert(1); }
```
- Dans une étroite sence c'est un function, pas un method 🙂
- Cela dépend si myMethod est global - window.myMethod ;).
InformationsquelleAutor Satya
0

Est-il un js auditeur lorsqu'un utilisateur fait défiler dans une certaine zone de texte qui peut être utilisé?

DOM L3 Les Événements de l'UI spec a donné la première définition, mais est considéré comme obsolètes.

Pour ajouter un handler, vous pouvez le faire:
```
  let isTicking;
const debounce = (callback, evt) => {
if (isTicking) return;
requestAnimationFrame(() => {
callback(evt);
isTicking = false;
});
isTicking = true;
};
const handleScroll = evt => console.log(evt, window.scrollX, window.scrollY);
document.defaultView.onscroll = evt => debounce(handleScroll, evt);
```
Pour plusieurs gestionnaires ou, si préférable pour le style raisons, vous pouvez utiliser addEventListener par opposition à l'affectation de votre gestionnaire de onscroll comme indiqué ci-dessus.

Si vous utilisez quelque chose comme _.anti-rebond de lodash vous pourriez probablement vous en sortir avec:
```
const handleScroll = evt => console.log(evt, window.scrollX, window.scrollY);
document.defaultView.onscroll = evt => _.debounce(() => handleScroll(evt));
```
Examen compatibilité du navigateur et assurez-vous à l'épreuve sur des périphériques réels avant de l'appeler fait.

InformationsquelleAutor Josh Habdas

Vous devez vous connecter pour publier un commentaire.