Problème onscroll sous IE [Résolu]

Signaler
Messages postés
87
Date d'inscription
vendredi 24 mars 2006
Statut
Membre
Dernière intervention
14 janvier 2011
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
bonjour à toutes et à tous je vous explique mon cas, se que je voudrai faire c qu'à chaque scroll un message alert s'affiche avec la position, ça marche sur tt les navigateur sauf sur IE
voici le code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function pos() {
d=document.documentElement.scrollTop;
alert(d);
}
</script>
</head>
































[# clic]

</html>

lorsque je clic sur le bouton "clic" ça marche mais se que je veux faire c qu'à chaque scroll un message alert apparaît avec la position mecri de m'éclairé ^^

17 réponses

Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
10 juillet 2020
83
le probleme vient que pour ie il faut ajoutre l'evenement dans document.documentElement (head) et pour les autres dans document

il y a aissi une autre difference mais ce coup ci pour les navigateurs webkit (chrome safari) qui recetionne la valeurs dans document.body (le body)et pour les autres c'est dans document.documentElement (le head)

non non c'est pas du tout galere

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function pos(){
if(navigator.vendor){
var d=document.body.scrollTop;
}
else{
var d=document.documentElement.scrollTop;
}
alert(d);
}


if(navigator.appName.substring(0,5)=="Micro"){
document.documentElement.onscroll=pos
}
else{
document.onscroll=pos
}

</script>
</head>


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


[# clic]

</html> 
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
un copier/coller et un test rapide plus tard, je ne vois pas de soucis !

;O)
Messages postés
87
Date d'inscription
vendredi 24 mars 2006
Statut
Membre
Dernière intervention
14 janvier 2011
1
salut, j'ai utilisé sous IE 8, et toi ?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
gagné, ce n'est pas IE8 que j'utilise...
essaies cela
window.onscroll = function(){
 alert( document.documentElement.scrollTop);
}

à la place de
 

;O)
Messages postés
87
Date d'inscription
vendredi 24 mars 2006
Statut
Membre
Dernière intervention
14 janvier 2011
1
non rien ne se passe :s foutu internet explorer il faut toujours qu'il nous embête avec leur trucs !!!!
t'as pas une autre solution ? :(
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
essaies avec ce DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

;O)
Messages postés
87
Date d'inscription
vendredi 24 mars 2006
Statut
Membre
Dernière intervention
14 janvier 2011
1
nada, toujours rien !!! j'ai passé ma journée sur google mais sans résultat :(
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
peut être encore un essai avec
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
html, body {
  height : 1000px;
}
</style>
<script type="text/javascript">
function Debug( txt_){
  document.getElementById('DEBUG').innerHTML += txt_;
}
window.onscroll = function(){
 Debug( document.documentElement.scrollTop +' - ');
}
</script>
</head>



[# clic]

</html>

on s'affranchit de l'alerte...

sinon sans IE8 je vais avoir du mal...
;O)
Messages postés
87
Date d'inscription
vendredi 24 mars 2006
Statut
Membre
Dernière intervention
14 janvier 2011
1
voilà se que j'ai comme affichage 4 - 5 - 10 - 21 - 33 - 44 - 55 - 67 - 78 - 90 - 90 - 104 - 117 - 129 - 142 - 155 - 167 - 180 - 180 - 165 - 153 - 140 - 128 - 115 - 102 - 90 - 90 - 75 - 63 - 50 - 38 - 25 - 13 - 0 - 0 - 4 -.....

en fait se que je veux faire au juste c d'afficher un div une fois que le scroll atteint une partie bien précise, sous chrome, mizilla, safari 0 problème mais sous IE rien ne marche !!!
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
vu le résultat que tu obtiens, j'en conclu qu'il y a interaction avec le alert mais que cela fonctionne.

Le problème est donc ailleurs.

;O)
Messages postés
87
Date d'inscription
vendredi 24 mars 2006
Statut
Membre
Dernière intervention
14 janvier 2011
1
mummm y'a pas un problème au niveau de ? vu qu'en lien ça passe ?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
essaies le même code en mettant un alert à la place du Debug, et dit ce qui se passe !

;O)
Messages postés
87
Date d'inscription
vendredi 24 mars 2006
Statut
Membre
Dernière intervention
14 janvier 2011
1
super kazma ça marche super bien depuis le temps que je cherchais une solution :s encore une fois milles merci :D
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
le probleme vient que pour ie il faut ajoutre l'evenement dans document.documentElement (head) et pour les autres dans document
pas exactement!
si la source que tu lui as fournie fonctionne sur la page de slashf , c’est que celle-ci est en mode quirks, malgré le DOCTYPE qu’il a mis, la preuve en est que l’exemple que je lui ai soumis a fonctionné également.

slashf, penses à valider ton code à l’aide d’un validateur par exemple validator.w3, IE8 étant visiblement intraitable !

L’ajout de l’événement onscroll sur l’objet window est une chose implémenté depuis longtemps avec des dysfonctionnements ça et la, certes, aux cours des âges.

En mode quirks il faut effectivement récupérer la valeur du scroll sur le document.body alors qu’en mode respect des standards il se récupère sur le document.documentElement et ce pour tous les navigateurs

non non c'est pas du tout galere
Effectivement pour récupérer les valeurs de scroll, et ce quelque soit le type de rendu de la page il suffit de faire
function getScrollPage(){
  var iTop  = document.body.scrollTop || document.documentElement.scrollTop ||0;
  var iLeft = document.body.scrollLeft || document.documentElement.scrollLeft ||0;
  return( {top : iTop, left : iLeft});
}


quelques lectures qui peuvent intéresser...
http://www.quirksmode.org/dom/events/scroll.html
http://www.quirksmode.org/dom/events/index.html#t021
il en existe bien d'autres...

;O)
Messages postés
1764
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
10 juillet 2020
83
j'ai ete voir sur le site et pour m'en persuadé j'ai fait un teste pour l'ajout de l'evenement et en gros pour la compatibilite meme si elle n'est pas totale le plus simple serait d'ajouter l'evenement sur window

quand a

function getScrollPage(){
  var iTop  = document.body.scrollTop || document.documentElement.scrollTop ||0;
  var iLeft = document.body.scrollLeft || document.documentElement.scrollLeft ||0;
  return( {top : iTop, left : iLeft});
}


j'ai du mal avec cette syntaxe j'ai peur que sa puisse cree une erreur mais je remarque qu' il a l'avantage de faire abstraction de la compatibile entre navigateurs donc c'est un bon point il me reste plus qu'a m'en persuadé
Messages postés
87
Date d'inscription
vendredi 24 mars 2006
Statut
Membre
Dernière intervention
14 janvier 2011
1
avec la méthode de kazma ça marche avec tt les navigateurs ( IE, mozilla, safari, chrome ) je vous cache pas que je me sens out quand je lis vos commentaires lol moi je suis plus PHP que javascript ( je sais que je dois m'y mettre et au plus vite si je veux utiliser la technologie ajax :/ ) je vais me renseigner sur le mode quirks parce que pour être honnête je sais même se que c lol, encore une fois merci à vous deux :)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
un petit test valant mieux que de longs discours
<script type="text/javascript">
  var szResult = "RESULTAT",
      Valeur,
      variable_1 = "valeur 1",
      variable_2 = "valeur 2",
      variable_3 = "valeur 3";
  Valeur = variable_1 || variable_2 || variable_3;
  szResult +"\nTest 1 " + Valeur;
  //--
  variable_1 = 0;
  Valeur = variable_1 || variable_2 || variable_3;
  szResult +"\nTest 2 " + Valeur;
  //--
  variable_2 = 0;
  Valeur = variable_1 || variable_2 || variable_3;
  szResult +"\nTest 3 " + Valeur;
  //--
  variable_3 = 0;
  Valeur = variable_1 || variable_2 || variable_3;
  szResult +"\nTest 4 " + Valeur;
  alert( szResult);
</script>
ATTENTION quand même cela ne fonctionne pas si une variable n'est pas définie...
Cela permet de remplacer les tests if( ){...} else{...} néanmoins plus pédagogiques

et pour le mode quirks à lire au minimum A propos du Modèle de boîte Microsoft (ou "quirks") chez alsacreations.

;O)