28112 sujets

CSS et mise en forme, CSS3

[Résolu] Coloration de la barre de défilement

Bonjour,
la propriété "scrollbar-color semble ne pas fonctionner sur la barre de défilement d'un carrousel fait avec sroll-snap. Article : https://www.alsacreations.com/tuto/lire/1791-et-si-css-vous-renvoyait-l-ascenseur.html
 /* scrollbar styling standard version */
html {
  scrollbar-color: #000 rgba(0,0,0,.15);
  scrollbar-width: thin;
}

Dans cet article, on parle des ascenseurs, pas de barres de défilement. Quand je place ce code, ça n'influence pas la barre du carrousel. La seule façon que j'ai trouvée pour mettre en évidence cette barre d'une couleur grise peu attirante, c'est de mettre un "background: white;" sur la galerie. Ce qui permet un peu de faire ressortir la barre.
Y-a-t-il une autre solution ? Et mettre des flèches ?
Pour info, le code d'exemple d'un carrousel en scroll-snap avec le background que j'ai ajouté :
.galery img { 
  min-width: 100%;
  max-width:100%;
  width:100%;
  /*background: white;*/
  height: auto;
  padding-bottom: 1.2vh;
  overflow:hidden;
  -ms-scroll-snap-align: start end;
  scroll-snap-align: start end;
}
.galery-horizontal {
  width: 90%;
  border: 1px solid black;
  overflow-y: hidden;
  overflow-x: scroll; 
  scroll-snap-type: x mandatory; 
}
.galery-horizontal {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  margin-left: 1em; 
}
Hello,

la propriété scrollbar-color fonctionne sur tous les éléments ( html, div, etc )
Par contre il fonctionne uniquement sous firefox:
upload/1607525199-79129-bar.jpg
Administrateur
stryk a écrit :

Par contre il fonctionne uniquement sous firefox

Hello,

Oui c'est bien précisé dans l'article : "À ce jour, seul Firefox (depuis la version 64) implémente ce très récent standard."

L'article précise également comment faire pour les autres navigateurs Smiley cligne
Modifié par Raphael (09 Dec 2020 - 18:05)
Merci pour la précision.
Je m'aperçois aussi que scroll-snap ne fonctionne plus correctement sur les versions récentes de Firefox. Une recherche m'amène vers : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Browser_compat
Il faut changer quelque peu les règles comme préconisé dans l'article et tout entre dans l'ordre. À se souvenir impérativement, parce que généralement, on pense plutôt que plus le navigateur est récent, mieux il supportera certaines spécifications. Là, c'est rapidement que Firefox a abandonné l'ancienne spécification. Si on ne le fait pas, les images s'affichent toutes les unes en dessous des autres, ce qui détruit complètement la page.
Sans doute pour les navigateurs, mais quand tu fais un slider avec scroll-snap, tu n'as rien qui indique qu'il y a d'autres images à visionner, pas de flèches (je cherche comment, justement), pas de "dots". Une modeste barre de navigation sur le bas de l'image indique au moins qu'il y a une suite sur la droite ou en bas. C'est plutôt pour indiquer, parce que pour naviguer, on peut le faire aussi avec une pression sur le côté droit de la souris ou au doigt sur les tactiles.
Je suis preneur de solutions simples pour des flèches.
Modérateur
Bonjour,

Navigue sur ton téléphone : il n'y a probablement jamais de barre de défilement, même pour les éléments internes à la page.

Pareil sur Macintosh. Il n'y a plus de barre de défilement depuis un moment. Elles n'apparaissent que si on commence à faire défiler un contenu.

Sous windows, il y a des tentatives régulières de la part de Microsoft de les faire disparaitre. Je pensais même que cela avait été généralisé, mais j'ai découvert il y a peu que finalement ce n'était pas encore le cas (j'utilise rarement des pc sous windows). Mais ça le sera tôt ou tard.

Il faut s'habituer à faire des designs où les barres de défilement n'apparaissent (discrètement) que si on commence à faire défiler un contenu, avec éventuellement (mais pas forcément) une indication visuelle comme quoi il y a quelque chose à faire défiler. C'est le sens de l'histoire.

Amicalement,
Oui, d'accord, mais tu parles principalement des barres sur les OS et les mobiles et tu ne réponds pas à ma question. Comment je fais pour un slider qui a été fait en scroll-snap. Cette mise en place d'un slider par ce code est très simple, mais sa rançon est de ne pas avoir de flèches d'indication. D'où une petite barre de navigation. Sur un slider, avant de vouloir faire apparaître du contenu, il faut déjà savoir que ce contenu existe. C'est là ma question. On peut décaler légèrement les images de façon à ce que la seconde apparaisse, mais ce n'est pas beau et réduit à néant le snap qui justement est là pour caler les images au centre de la fenêtre.
Il n'y a pas de barres de défilement sur mon mobile, je n'ai pas Windows ni Mac et Linux n'en a pas non plus. Et même s'il y en a une par hasard, je préfère utiliser la molette ou les flèches du clavier. On est d'accord sur ce point.
Modérateur
Bonjour,

C'est à mon avis plus facile de cacher la scrollbar et de rajouter des boutons avec js plutôt que d'essayer de styler la scrollbar "en toute circonstance".

Exemple (ceux qui désactivent js pourront quand même parcourir le slide; ce ne sera pas mission impossible car dans ce cas, on ne cache pas la scrollbar) : https://jsfiddle.net/parsimonhi/ynum05tw/

Amicalement,
Modifié par parsimonhi (10 Dec 2020 - 12:02)
Tu as raison, maintenant que j'ai trouvé comment ajouter des "dots" même sans Javascript, je veux cacher la scrollbar Smiley fache Et merci beaucoup pour le code, c'est ce que je cherchais, hormis le fait que je vais encore ajouter du JavaScript si je choisis ta méthode.
Entre temps, j'avais trouvé une solution même sans JavaScript. Ça fonctionne, voici le code. Le seul problème que j'ai, c'est que quand je clique sur un "dot", l'ensemble de la galerie descend de plusieurs cm sur la page, comme si le lien d'ancre pointait plus bas. C'est étrange, et ça ne le fait qu'au clic de la première image, sur les autres, ça ne bouge plus. Je n'ai pas pu résoudre ce problème pour le moment, mais le reste fonctionne impec.
Le code en css avec des "dots":
<div class="galerie">
<img id="slide1" src="Images/Acacia-480.JPG" width="480" height="360" alt="Acacias"/>
<img id="slide2" src="#" data-src="Images/Acacia-2-480.jpg" width="480" height="360" alt="Acacias brousse"/>
<img id="slide3" src="#" data-src="Images/Branchages-480.jpg" width="480" height="360" alt="Branchages"/>
</div>
<div class="ancre">
<li><a href="#slide1">o</a></li>
<li><a href="#slide2">o</a></li>
<li><a href="#slide3">o</a></li>
</div>

.galerie {
width: 60%;
max-width: 60%;
margin: auto;
display: flex; 
overflow-x: scroll; 
overflow-y: scroll;
    scroll-snap-points-y: repeat(320px);
    scroll-snap-destination: 0 0;
    scroll-snap-type: x mandatory;
    scroll-snap-type: mandatory;}
.galerie img {
margin:0;
min-width:100%;
align-self: center; /*pour le responsive*/
scroll-snap-align: center;
overflow:hidden;
  -ms-scroll-snap-align: start end;
  scroll-snap-align: start end;}
.ancre {	
margin: 1rem auto;
display: flex;
justify-content: center;}
	.ancre li{
display: inline-flex;
justify-content: center;
align-items:center;}
.ancre li a{color:white}
.ancre li:not(:last-child){
  margin-right: 40px;}
.ancre li a:hover {
  opacity: 0.5;
  color: red;}

Bonne journée.
Modérateur
Bonjour,

Ça "descend" parce que le navigateur scrolle quand tu cliques sur un lien vers une ancre. Si toutes tes ancres sont sur la même ligne, au 2e clique, le navigateur n'a plus besoin de scroller.

Il y a aussi des solutions à base d'input-radio (qu'on place juste avant les images concernées), qui évite ce scroll intempestif du navigateur et laisse l'url de la page propre (sans référence à l'ancre). Mais c'est un peu plus difficile à styler.

Amicalement,
Merci pour l'info.

C'est dommage de renoncer à ce simple slider sans js juste à cause de ce saut. J'ai un peu cherché, il y a des solutions proposées, mais c'est un peu lourd juste pour régler ce problème. Sinon, tout fonctionne avec le code que j'ai donné et les dots sont bien suffisants pour avertir le visiteur qu'il peut voir d'autres images.
Sujet clos
Aller à