Détecter le scroll vertical

Version imprimable

Voir 40 message(s) de cette discussion en une page

20/06/2017, 21h52
boteha

Détecter le scroll vertical

Bonjour,

Pour un effet sticky je cherche un code javascript le plus léger possible pour détecter le scroll vertical et appliquer alors un changement de position à certains éléments et de display à d'autres.

Je précise que je connais très peu javascript.

Merci d'avance.
21/06/2017, 19h40
NoSmoking

Bonjour,
il te faut mettre un « écouteur » sur l'événement onscroll de ton document et agir en conséquence.

GlobalEventHandlers.onscroll.
21/06/2017, 19h58
boteha

Bonjour,

Merci de ta réponse mais je me suis mal exprimé.

Je veux détecter le scrool vertical et au-delà d'une certaine valeur, par exemple 200 pixels, appliquer des changements CSS à divers éléments de la page.

Dans ton lien je ne vois pas comment faire pour :

if (scrool_vertical > 200px)
21/06/2017, 23h17
danielhagnoul

:salut:

Voir scrollTop : https://developer.mozilla.org/fr/doc...ment/scrollTop
22/06/2017, 13h00
boteha

Bonjour,

Merci.

je vais étudier cela.
23/06/2017, 19h33
boteha

Bonjour,

Je ne suis pas sûr que scrollTop soit adapté et je ne sais pas comment le mettre en place.

Par contre il me semble que ma question n'est pas originale.

Palier les limites de Position sticky en CSS et avoir un effet sticky via javascript, il me semble que des dizaines de sites le font déjà.

J'aimerais juste trouver le morceau de code javascript que je sais pas programmer, il me semble que c'est répandu.

if (scrool_vertical > 200px)
Je passe un élément de "position : absolute" à "position : fixed"
Je passe un autre élément en "display : none"

Salut

Cela fait 3 mois que je me suis mis au JavaScript, j'avais copier/coller/modifier ce bout de code pour apprendre.

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
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
.test1 {
    background-color: lightblue;
}
.test2 {
    background-color: yellow;
}
.test3 {
    background-color: red;
}
</style>
</head>
<body style="height:1500px; width:1800px">
 
<p>Faites défiler cette page de haut en bas ainsi que de droite à gauche</p>
 
<div id="myP" style="position:fixed">
<p id="mesures">.</p>
<p> Lorsque vous avez parcouru 50 pixels du haut de cette page, ajouter la classe "test" (Couleur de fond jaune) a ce paragraphe.
	<br> Faites défiler vers le haut pour supprimer la classe.
</p>
</div>
<script>
window.onscroll = function() {myFunction()};
 
function myFunction() {
    var x = document.body.scrollTop || document.documentElement.scrollTop;
        if (x > 150) 
                {document.getElementById("myP").className = "test1";}
                else if (x > 100) {document.getElementById("myP").className = "test2";} 
                else if (x > 50) {document.getElementById("myP").className = "test3"; 
                } else {
        document.getElementById("myP").className = "";
    }
    var y = document.body.scrollLeft || document.documentElement.scrollLeft;
        document.getElementById("mesures").innerHTML = "scrollLeft = " + y + "px            scrollTop = " +  x + "px" ;
        
}
</script>
 
</body>
</html>

en espérant que cela te rendra service.

23/06/2017, 20h18
boteha

Merci, cela semble intéressant.
je vais travailler sur ma page de test.

Bonjour,

J'ai juste gardé ce petit morceau de ton code que je mets à la fin du body :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type="text/javascript">  </script>
Et un doigt de CSS avec gestion responsive :
Code:

1 2 3 4 5 6 7 div#panier.fixed {position: fixed; top: 10px} div#panier.fixed div.prom, div#panier.fixed p#ps {display: none} @media screen and (max-width: 768px) { div#panier.fixed {position: static} }
Cela semble très bien marcher, voir ces deux exemples :

Test_1

Test_2

1)
Un truc que je comprends pas :
Code:

1 2 var x = document.body.scrollTop || document.documentElement.scrollTop; if (x > 100)
J'ai l'impression que les 100px sont calculé sur le scroll du div#panier, pas sur body.

En fait cela marche pareil en enlevant " document.body.scrollTop || "

Code:

var x = document.documentElement.scrollTop;

C'est ce que j'ai fait dans Test_2.

2)
Le script est super léger mais ne vaut-il pas mieux le charger au niveau du serveur plutôt que l'intégrer à la page html ?
Si oui je suis tellement nul en javascript que je ne sais pas comment faire...

Bonjour,

J'ai réfléchi à une petite complication.

Au cas où la hauteur du bloc en position fixe est supérieure à la hauteur de la fenêtre active il devient impossible d'accéder au contenu du bloc qui sort de la fenêtre en bas.
Dans ce cas il faut que le bloc reste en position "scrollable".

Donc, dans le code javascript il faudrait ajouter une nouvelle condition :
Code:

1 2 3 4 5 6 7 8 9 10 function myFunction() { var x = document.body.scrollTop || document.documentElement.scrollTop; if (x > 100 AND hauteur div#panier < hauteur fenêtre active) { document.getElementById("panier").className = "fixed"; } else { document.getElementById("panier").className = ""; }
Je vois comment coder hauteur div#panier < hauteur fenêtre active en javascript, je suppose que c'est possible.

Merci d'avance.

Bonjour,

Cela peut donner :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
<!--
window.onscroll = function() {myFunction()};
 
function myFunction() {
var x = document.body.scrollTop || document.documentElement.scrollTop;
var h = document.getElementById("panier").offsetHeight;
var b = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 
 
if (x > 100 && h < b) 
{
document.getElementById("panier").className = "fixed";
}
else
{
document.getElementById("panier").className = "";
}
 
}
//-->
</script>

Cela marche au moins sur Firefox : Test

Je me pose la question de la portabilité sur tous les navigateurs.

02/07/2017, 08h08
NoSmoking

Citation:

Je me pose la question de la portabilité sur tous les navigateurs.

le mieux est de faire les tests pour ce rendre compte ;)
02/07/2017, 12h17
boteha

Bonjour,

Oui, tu as raison.

Il est clair que cela doit marcher avec les navigateurs récents.

Il faut donc tester les vieux coucous mais je ne les ai pas sous la main.

Je sais qu'IE permet d'émuler les vieux coucous mais pour Chrome ou Firefox je ne suis pas sûr que ce soit possible.

N'y a-t-il pas des sites qui permettent ce genre de tests ?
02/07/2017, 19h10
NoSmoking

Pour tous les navigateurs, pour peu que tu mettes un <!DOCTYPE html> à tes documents, tu auras accès à document.documentElement et dans ce cas il n'y a aucune raison pour que cela ne marche pas.
02/07/2017, 19h19
boteha

Bonjour,

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Je suppose que c'est bon.

Je suppose aussi que certains vieux coucous ne connaissent pas window.onscroll mais ce n'est pas trop grave, il pourront quand même naviguer.
02/07/2017, 19h33
NoSmoking

• <!DOCTYPE html> est très largement suffisant.

• window.onscroll est reconnu depuis le siècle dernier :mrgreen:
02/07/2017, 19h41
boteha

Bonjour,

Citation:

Envoyé par NoSmoking

• <!DOCTYPE html> est très largement suffisant.

Ce n'est pas le sujet mais dans mon DOCTYPE je dois indiquer que je suis en xhtml 1.0 strict, non ?

Encore merci de ton aide.
05/07/2017, 18h19
NoSmoking

Tu peux effectivement laisser ton DOCTYPE mais tu peux également mettre le DOCTYPE Html5 en conservant la rigueur/syntaxe (X)HTML.
05/07/2017, 18h29
boteha

Bonjour,

Comme je ne suis pas en html5 autant laisser le DOCTYPE xhtml.

Il me semble que le navigateur tient compte de l'information pour traiter mon code.
05/07/2017, 18h42
NoSmoking

N’hésites pas à passer ta discussion en résolue !

Voir 40 message(s) de cette discussion en une page