Test sur scrolling de la page

**Harlock999** · 10/09/2012, 22h59

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 ! :-)

**Argonz** · 11/09/2012, 07h36

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.

**Harlock999** · 11/09/2012, 11h30

Merci Seboubou.

Curieusement, je n'arrive pas à faire fonctionner cet exemple

**Harlock999** · 11/09/2012, 13h29

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

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

Ouf !

**SpaceFrog** · 11/09/2012, 14h19

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Test sur scrolling de la page

JavaScript

Vue hybride

Discussions similaires

Partager

Partager