web-dev-qa-db-fra.com

Pourquoi l'événement window onscroll ne fonctionne-t-il pas?

Je souhaite exécuter l'événement onscroll de la fenêtre, mais je ne sais pas pourquoi il ne fonctionne pas sur tous les navigateurs (firefox, chrome, etc.) et aucune erreur ne s'est produite.

Code complet: 

var elem = document.getElementById('repeat');
var show = document.getElementById('show');

for (i = 1; i <= 300; i++) {
    elem.innerHTML += i + "<br/>";
}


window.onscroll = function () {
    show.innerHTML = document.body.scrollTop;
};
#show {
    display:block;
    position:fixed;
    top:0px;
    left:300px;
}
<pre id="repeat"></pre>

<div style="position:relative;">
    <div id="show">x</div>
</div>

Aussi jsfiddle: http://jsfiddle.net/sqo0140j

Quel est le problème?

javascripteventsonscroll
5
Lion King

Vous avez dit quelque chose d'intéressant:

x changé à 0 et reste tel quel.

La seule manière possible dans votre code est que le bloc de fonction onscroll apporte une modification, car votre code HTML définit x.

Si votre window.onscroll = function() est en effet en train de tirer, mais que vous n'obtenez pas la bonne position de défilement (c'est-à-dire 0), essayez de modifier le mode de renvoi de la position de défilement:

window.onscroll = function () {
    show.innerHTML = document.documentElement.scrollTop || document.body.scrollTop;
};

J'ai découvert que document.documentElement.scrollTop renvoie toujours 0 sur Chrome. En effet, WebKit utilise body pour garder la trace du défilement, mais Firefox et IE utilisent html.

Veuillez essayer votre extrait mis à jour:

var elem = document.getElementById('repeat');
var show = document.getElementById('show');

for (i = 1; i <= 300; i++) {
    elem.innerHTML += i + "<br/>";
}


window.onscroll = function () {
    show.innerHTML = document.documentElement.scrollTop || document.body.scrollTop;
};
#show {
    display:block;
    position:fixed;
    top:0px;
    left:300px;
}
<pre id="repeat"></pre>

<div style="position:relative;">
    <div id="show">x</div>
</div>
9
Drakes

On a répondu à cette question, mais je voulais inclure des détails sur ma situation qui empêchent onscroll de fonctionner.

J'ai un conteneur de données qui a sa propre barre de défilement qui remplace la barre de défilement de la fenêtre intégrée. Je n'ai pas remarqué cela jusqu'à ce que je commence à jeter un regard plus approfondi sur les éléments de la page à l'aide du développeur Chrome. Ma balise externe ressemblait à ceci,

Cela a provoqué l'apparition de deux barres de défilement à gauche. En effet, la propriété overflow: auto demandait au conteneur de données de créer une autre barre de défilement.

Une fois le débordement supprimé: auto, je pouvais maintenant corriger l’événement onscroll.

0
Bryan Harrington

Pour moi, l'instruction document.body.scrollTop; fonctionne bien dans Chrome et Opera, mais sous Firefox, elle renvoie 0.

Viceversa, l'instruction document.documentElement.scrollTop; fonctionne bien sur Firefox mais pas sur Chrome et Opera ...

Peut-être que document.body.scrollTop; n'est pas bien pris en charge par FF

Solutions possibles:

J'ai essayé:

Math.max(document.body.scrollTop, document.documentElement.scrollTop);

et

 document.body.scrollTop || document.documentElement.scrollTop;

Ils fonctionnent tous les deux bien sur tous les navigateurs ci-dessus.

0
willy wonka