Détecter le scroll vertical

Version imprimable

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 !
05/07/2017, 18h53
boteha

Ok, je coche résolu.

Merci pour ton aide.

Bonjour,

Après des semaines de mise en production j'ai découvert un effet de bord.

En gros j'ai deux blocs.
Il faut aussi tenir compte de leur largeur car autrement ils peuvent se chevaucher si l'utilisateur scrolle vers la gauche

Code original :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 = "";
}   
}

Code modifié :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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;
 
var a = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
 
var v = document.getElementById("panier").offsetWidth;
var w = document.getElementById("recherche").offsetWidth;
 
if (x > 100 && h < b && (v + w) < a) 
{
document.getElementById("panier").className = "fixed";
}
else
{
document.getElementById("panier").className = "";
}   
}

Ne marche pas.
Je pense que mes variables sont bonnes.

(v + w) dans le if calcule-t-il bien la somme ?

Merci d'avance.

13/11/2017, 19h42
boteha

Bonjour,

Plutôt que de s'ennuyer à calculer les largeurs est-il possible de détecter l'existence d'une barre de défilement horizontale ?

if (x > 100 && h < b && pas de barre de défilement horizontale)

L’apparence des barres de défilement peut varier d’un navigateur à l’autre, d’un OS à l’autre, et même d’un thème visuel à l’autre sous le même OS. Sous un Linux avec le bureau Gnome par exemple, il existe des centaines (peut-être des milliers) de thèmes donnant des apparences très diverses à la barre de défilement, allant de la bonne vielle barre rectangulaire à largeur fixe, à la barre « invisible » qui ne s’affiche que quand on approche le curseur de la souris. À cause de cette variété, on ne peut pas coder en dur une hauteur/largeur de barre dans un script.

La page Déterminer les dimensions d’un élément donne des informations importantes. On y apprend que offsetWidth nous donne la largeur occupée par l’élément, bordures et barre de défilement compris, tandis que clientWidth nous donne la largeur visible sans bordures ni barre. Pour déterminer la présence de la barre, il faut donc faire la différence entre offsetWidth et clientWidth plus les bordures, et comparer cette valeur à 0.

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Largeur de la barre de défilement</title>
  <style>
 
  #parent, #enfant { border: solid thin gray;
                   }
 
  #parent { width: 75%;
            height: 200px;
          }
 
  #enfant { background-color: #FB4;
            margin: 1rem;
            width: 120%;
            height: 300px;
          }
 
  .overflow-visible { overflow: visible; }
  .overflow-hidden  { overflow: hidden;  }
  .overflow-scroll  { overflow: scroll;  }
 
  #parent::before { position: absolute;
                    display: block;
                  }
 
  .overflow-visible::before { content: "overflow: visible"; }
  .overflow-hidden::before  { content: "overflow: hidden";  }
  .overflow-scroll::before  { content: "overflow: scroll";  }
 
  </style>
</head>
<body>
 
<div id="parent" class="overflow-visible">
  <div id="enfant"></div>
</div>
 
<button>Changer l’overflow</button>
 
<pre id="log"></pre>
 
<script> "use strict";
 
let $parent  = document.querySelector("#parent");
let $enfant  = document.querySelector("#enfant");
let $bouton  = document.querySelector("button");
let $log     = document.querySelector("#log");
 
function logDifference() {
  let cStyle = getComputedStyle($parent);
  let totalBorderWidth = Number.parseInt(cStyle.borderLeftWidth, 10) +
    Number.parseInt(cStyle.borderRightWidth, 10);
 
  $log.textContent += "différence = " +
    ($parent.offsetWidth - $parent.clientWidth - totalBorderWidth) + "\n";
}
 
$bouton.addEventListener("click", function (event) {
  switch ($parent.className) {
    case "overflow-visible": $parent.className = "overflow-hidden";  break;
    case "overflow-hidden":  $parent.className = "overflow-scroll";  break;
    default:                 $parent.className = "overflow-visible"; break;
  }
  logDifference();
});
 
logDifference();
 
</script>
</body>
</html>

Bonjour,

Merci de ta réponse.

Je compare ces deux valeurs et cela semble bien marcher :
Code:

1 2 3 var a = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var w = document.body.scrollWidth || document.documentElement.scrollWidth;
Je vais aussi faire un essai avec scrollLeft.