Détecter le scroll vertical

Version imprimable

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

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.

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