Scrollbar du body ?

**PrincessLoiseau** · 19/04/2023, 11h50

Bonjour,

Y a t'il un élément particulier à cibler pour le Scrollbar de la page ?

J'ai testé sur getElementsByTagName("BODY")[0]; mais le calcul ne se fait pas.
Peut-être normal puisque l'élément scroll ne fait pas partie des Propriétés de l'objet corps ?
Ou erreur de code..

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
<!DOCTYPE html>
<html>
<style>
#myDIV {
  height: 250px;
  width: 250px;
  overflow: auto;
}
 
#content {
  height: 800px;
  width: 2000px;
  background-color: coral;
}
</style>
 
<body onscroll="myFunction()">
<h1>The Element Object</h1>
<h2>The scrollTop and scrollLeft Properties</h2>
 
<p>Scroll the content below to display the number of pixels it is scrolled.</p>
 
<div id="myDIV">
  <div id="content">Scroll me!</div>
</div>
 
<p id="demo"></p>
 
<script>
function myFunction() {
  const element = document.getElementsByTagName("BODY")[0];
  let x = element.scrollLeft;
  let y = element.scrollTop;
  document.getElementById ("demo").innerHTML = "Horizontally: " + x.toFixed() + "<br>Vertically: " + y.toFixed();
}
</script>
 
</body>
</html>

Pour le résultat que je cherche, il y a un petit désagrément avec les scrollbar. Lorsque un display est ouvert en z-index niveau supérieur avec un [c=CSS]overflow:auto;[/B] il se passe que quand ce display scrollbar a terminer sa course et que l'on continue à scroller avec la souris, c'est le scrollbar de la page générale qui se met à défiler. Du coup je cherche à fixer ce dernier. Si cela est possible !

Merci de vos retours et piste

**PrincessLoiseau** · 19/04/2023, 14h52

j'ai trouvé ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.scroll(x-coord, y-coord)

Se rapporte à window.

Mais s'il déplace bien les coordonnées de la scrollbar, je ne vois pas d'option pour la rendre fixe.

**Toufik83** · 23/04/2023, 14h39

Bonjour,

Vous voulez récupérer le scroll du body ou bien celui de <div id="myDIV"> ?

Si c'est le deuxième élément, déplacez la propriété onscroll vers l'élément pour qu'il devient comme ça <div id="myDIV" onscroll="myFunction()"> puis vous pouvez essayer ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function myFunction() {
  const element = document.getElementById("myDIV");
  let x = element.scrollLeft;
  let y = element.scrollTop;
  document.getElementById ("demo").innerHTML = "Horizontally: " + x.toFixed() + "<br>Vertically: " + y.toFixed();
}

**PrincessLoiseau** · 25/04/2023, 11h44

Bonjour,

De la sorte ce code est fonctionnel. Tout à fait.

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
<!DOCTYPE html>
<html>
<style>
#myDIV { height: 250px; width: 250px; overflow: auto; }
#content { height: 800px; width: 2000px; background-color: coral; }
</style>
 
<body>
 
<div id="myDIV" onscroll="myFunction()">
  <div id="content">Scroll me!</div>
</div>
 
<p id="demo"></p>
 
<script>
function myFunction() {
  const element = document.getElementById("myDIV");
  let x = element.scrollLeft;
  let y = element.scrollTop;
  document.getElementById ("demo").innerHTML = "Horizontally: " + x.toFixed() + "<br>Vertically: " + y.toFixed();
}
</script>
 
</body>
</html>

Je vous met ci-bas un autre code. En le testant vous vous apercevrez que lorsque l'on positionne la souris dans le myDIV, que lorsque la y scrollbar arrive à la fin et que, vous continuez à scroller quelques tour avec la souris, il arrive un moment ou ce sera la scrollbar du document qui défilera.

J'aurai souhaiter que, lorsque par un mouseenter sur myDIV, la scrollbar du document se fixe et se dé-fixe en mouseleave.

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
<!DOCTYPE html>
<html>
<style>
#contenuGlobal { width: 100%; height: 200vh;}
#myDIV { height: 250px; width: 250px; overflow: auto;  }
#content { height: 800px; width: 2000px; background-color: coral; }
</style>
 
<body>
 
<div id="contenuGlobal">
 
<div id="myDIV" onscroll="myFunction()">
  <div id="content">Scroll me!</div>
</div>
<p id="demo"></p>
 
</div>
 
<script>
function myFunction() {
  const element = document.getElementById("myDIV");
  let x = element.scrollLeft;
  let y = element.scrollTop;
  document.getElementById ("demo").innerHTML = "Horizontally: " + x.toFixed() + "<br>Vertically: " + y.toFixed();
}
</script>
 
</body>
</html>

**Toufik83** · 25/04/2023, 14h05

Bonjour,

Vous pouvez désactiver le scroll du body lors d'un mouseenter (souris dedans) sur le div et le réactiver lors d'un mouseleave (souris dehors), pour ceci ajoutez ces deux écouteurs d'événements dans votre script JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
document.getElementById('myDIV').addEventListener('mouseenter',function(){
	document.body.classList.add('noScroll');
});
document.getElementById('myDIV').addEventListener('mouseleave',function(){
	document.body.classList.remove('noScroll');
});

Et la classe noScroll :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

.noScroll{overflow:hidden}

**PrincessLoiseau** · 25/04/2023, 15h44

Bonjour,

Le test a bien été effectué.

Petit problème.

En overflow:hidden, le scroll disparaît, mais l'espace que celui-ci occupait initialement est automatiquement remplit par la page, qui elle, s'agrandit pour combler ce vide.

Je ne sais pas s'il est possible de fixer la scollbar, mais cette histoire de style m'a donné une petite idée ( fonctionnelle ) qui pourrait bien faire l'affaire.

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
document.getElementById('div').addEventListener('mouseleave',function(){
   var styleElement = document.createElement("style");
   styleElement.appendChild(document.createTextNode("::-webkit-scrollbar-thumb { background-image: url('img/logo_scroll_out.png'); }"));
   document.getElementsByTagName("head")[0].appendChild(styleElement);
});
document.getElementById('div').addEventListener('mouseenter',function(){
   var styleElement = document.createElement("style");
   styleElement.appendChild(document.createTextNode("::-webkit-scrollbar-thumb { background-image: none;}"));
   document.getElementsByTagName("head")[0].appendChild(styleElement);
});

A défaut de merle

**Toufik83** · 25/04/2023, 15h59

Bonjour,

Votre méthode avec appendChild n'est pas OK, car à chaque fois que la souris est à l'intérieur du div, un élément <style> est rajouté au head et donc une répétition....

Si la solution de overflow ne vous convient pas, vous pouvez fixer le scroll de la fenêtre en fonction du top de votre <div id="myDIV"></div>, avec cette méthode vous aurez besoin d'utiliser seulement l'événement mouseenter et sans aucune classe CSS.

Pour positionner le scroll au top du div :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById('myDIV').addEventListener('mouseenter',function(){
	window.scroll(0,this.offsetTop);
});

Pour garder le scroll à sa propre position :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById('myDIV').addEventListener('mouseenter',function(){
	window.scroll(0,window.scrollY);
});

La deuxième solution me semble plus propre...

**PrincessLoiseau** · 25/04/2023, 17h47

Sur le coup, j'ai du mal à vous suivre.

Envoyé par Toufik83

Pour garder le scroll à sa propre position :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById('myDIV').addEventListener('mouseenter',function(){
	window.scroll(0,window.scrollY);
});

window.scrollY ne fait que capter la position Y du scoll, sans toutefois la fixer.

Cela revient au même que

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById('myDIV').addEventListener('mouseenter',function(){
	window.scroll(0,0);
});

Dans ce cas, le scroll remonte à zéro, sans toutefois être fixé.

Ce qui renvoi au #2.

Je viens de tenter un ( sans succès )

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

::-webkit-scrollbar-thumb { position: fixed; top: 0; left: 0; }

**Toufik83** · 25/04/2023, 18h15

Envoyé par PrincessLoiseau

Sur le coup, j'ai du mal à vous suivre.
window.scrollY ne fait que capter la position Y du scoll, sans toutefois la fixer.

Elle capte la position du scroll du document lorsque vous mettez la souris à l'intérieur du div, ceci dit que le scroll est fixé à cette position tant que vous êtes à l'intérieur du div.

Si le scroll du div arrive à son fin et que vous essayez encore de défiler sa barre, vous constatez que le scroll du document reste toujours à sa position.

**PrincessLoiseau** · 25/04/2023, 18h54

Re-test.

Et retour avec un demi correctif.

Il y a du effectivement. C'est à dire que cela fonctionne tant que la souris reste en place sur myDIV.

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
<!DOCTYPE html>
<html>
<style>
#contenuGlobal { width: 100%; height: 200vh;}
#myDIV { height: 250px; width: 250px; overflow: auto;  }
#content { height: 800px; width: 2000px; background-color: coral; }
</style>
 
<body>
 
<div id="contenuGlobal">
 
<div id="myDIV">
  <div id="content">Scroll me!</div>
</div>
 
</div>
 
<script>
document.getElementById('myDIV').addEventListener('mouseenter',function(){
        window.scroll(0,window.scrollY);
});
</script>
 
</body>
</html>

Et dès que l'on navigue dans le myDIV. cela perd la fonction.

Scrollbar du body ?

JavaScript

Discussions similaires

Partager

Partager