Détecter le scroll vertical

**boteha** · 05/07/2017, 19h53

Ok, je coche résolu.

Merci pour ton aide.

**boteha** · 13/11/2017, 20h00

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 :

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 = "";
}   
}

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
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.

**boteha** · 13/11/2017, 20h42

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)

**Watilin** · 15/11/2017, 15h52

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 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>

**boteha** · 15/11/2017, 20h01

Bonjour,

Merci de ta réponse.

Je compare ces deux valeurs et cela semble bien marcher :

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;

Je vais aussi faire un essai avec scrollLeft.

Détecter le scroll vertical

JavaScript

Discussions similaires

Partager

Partager