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

Scrollbar du body ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager