Test sur scrolling de la page

Version imprimable

10/09/2012, 21h59
Harlock999

Test sur scrolling de la page

Bonjour à tous,

Je voudrais déclencher un événement lorsque certains éléments de ma page sont affichés dans la fenêtre du navigateur, à savoir tout simplement des titres qui se succèdent dans la hauteur de la page (page très haute).
J'ai trouvé un script qui teste l'affichage complet ou partiel (ou absent) d'éléments div, ce qui me va très bien. Sauf que l'exemple en question réagit au clic.

Dans un premier temps, j'ai retiré toutes les infos concernant les coordonnées de mes éléments en x (je n'ai besoin que du y).

Ensuite j'ai tenté de lancer ma fonction ainsi :
document.onscroll=function(){...}

Je suis arrivé à mes fins, mais uniquement sur Mac.
IE sur Windows ne semble pas comprendre "onscroll"...

Quelqu'un sait-il comment je dois procéder pour que PC et Mac puissent TOUS DEUX réagir de la même manière ?

Y a t-il autre chose à tester que le scroll de l'utilisateur ?

D'avance merci ! :-)
11/09/2012, 06h36
Argonz

Salut,

J'ai trouvé ceci !

Je pense que tu dois également pouvoir utiliser le scroll de l'élément body.

J'espère que ça vas t'aider.
11/09/2012, 10h30
Harlock999

Merci Seboubou.

Curieusement, je n'arrive pas à faire fonctionner cet exemple :(
11/09/2012, 12h29
Harlock999

À force de bidouiller, j'ai fini par trouver quelque chose qui semble fonctionner sur tous les navigateurs testés :

window.onscroll=function()
{...}

Ouf !

avec jquery ça permet de faire de turcs marrants ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery.js'></script>
<style>
  div { color:blue; }
  p { color:green; }
  span { color:red; display:none; }
  </style>
<script type="text/javascript">
$(function(){
 
$(window).scroll(function () { 
     $("[id^='_']").each( function(){
     limit= $(this).offset().top
      if(100< limit && limit <120){ $(this).find("span").css("display", "inline").fadeOut("slow");} 
      })
    });
})
</script>
 
</head>
<body>
<div>Try scrolling the iframe.</div>
  <p id="model">Paragraph - <span>Scroll happened!</span></p>
<script>
 
  for( i=0;i<50;i++){
    $("#model").clone().attr('id','_'+i).appendTo(document.body);
	}
 
 
 
</script>
</body>
</html>