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 modifi� :
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 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 = ""; } }
Ne marche pas.
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 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 = ""; } }
Je pense que mes variables sont bonnes.
(v + w) dans le if calcule-t-il bien la somme ?
Merci d'avance.
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 HTML : 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
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 loverflow</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>
La FAQ JavaScript � Les cours JavaScript
Touche F12 = la console → l�outil indispensable pour d�velopper en JavaScript !
Bonjour,
Merci de ta r�ponse.
Je compare ces deux valeurs et cela semble bien marcher :
Je vais aussi faire un essai avec scrollLeft.
Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3 var a = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var w = document.body.scrollWidth || document.documentElement.scrollWidth;
Partager