Scrollbar du body ?

Version imprimable

Scrollbar du body ?

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:

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

19/04/2023, 14h52
PrincessLoiseau

semi avancée

j'ai trouvé ceci :

Code:

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.

8O

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:

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(); }

Bonjour,

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

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

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>

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:

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:

.noScroll{overflow:hidden}

overflow:hidden

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:

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

25/04/2023, 15h59
Toufik83
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:

1 2 3 document.getElementById('myDIV').addEventListener('mouseenter',function(){ window.scroll(0,this.offsetTop); });
Pour garder le scroll à sa propre position :
Code:

1 2 3 document.getElementById('myDIV').addEventListener('mouseenter',function(){ window.scroll(0,window.scrollY); });
La deuxième solution me semble plus propre...
25/04/2023, 17h47
PrincessLoiseau
Sur le coup, j'ai du mal à vous suivre.
Citation:
Envoyé par Toufik83

Pour garder le scroll à sa propre position :

Code:

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:

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:

::-webkit-scrollbar-thumb { position: fixed; top: 0; left: 0; }
25/04/2023, 18h15
Toufik83

Citation:

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.

correctif

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:

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.