Partage

Petit soucis esthétique de scrollbar

Sujet résolu
15 avril 2018 à 23:53:27

Bonjour à tous et à toutes,

Cela fait maintenant plus de deux-trois mois que je suis en train de dev mon site web pour un futur projet que je vous présenterais sans aucun doute.
Jusqu'ici tous les problèmes présents était relativement faciles à régler ou il était facile de trouver de la documentation pour les régler.
Mais maintenant j'ai un problème relativement important et la documentation n'est pas très présente ou incompréhensible.
J'ai dev mon site avec Chrome comme navigateur de base.
Le problème étant que lors de mon test pour le bon fonctionnement du site sur Mozilla je me suis aperçu que la scrollbar faisait très tache avec le thème du site (Je l'ai retirer sur chrome avec le "::-webkit-scrollbar {display: none;}").
Je voulais donc savoir comment retirer la scrollbar également sur mozilla. 
Merci de votre aide.
Nerwy

-
Edité par MicheleSantanche 16 avril 2018 à 13:00:32

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%
16 avril 2018 à 8:44:25

Bonjour,

C'est simple:

Tu as le choix entre 

overflow: visible;

pas de scroll, mais un risque que le contenu déborde du conteneur.

ou

overflow: hidden;

qui n'affichera ni la barre de scroll, ni le contenu en excès.

Ces instructions sont acceptées par tous les navigateurs ; pas besoin de ::-webkit-scrollbar .

Et sinon, "esthétique" s'écrit ainsi... Tu peux corriger ton titre...

"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
Staff 16 avril 2018 à 9:06:09

Bonjour,

> qui n'affichera ni la barre de scroll, ni le contenu en excès.

et empêchera de scroller, attention. Possible (probable) perte d'utilisabilité. Je ne conseille pas.

MicheleSantanche, pourquoi veux-tu cacher cette barre, exactement ? Peut-on voir une capture d'écran du site, pour comprendre pourquoi ça "fait tache" ?

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
16 avril 2018 à 11:43:24

Hello,

Heu... je vais peut-être dire une bêtise, mais si FF est à jour je ne voir guère de différence au niveau du scroll bar ?

Et je suis la aussi en accords, pourquoi vouloir la modifier ? l'utilisateur connait son navigateur et à ses habitudes.

16 avril 2018 à 13:08:26

philiga a écrit:

Bonjour,

C'est simple:

Tu as le choix entre 

overflow: visible;

pas de scroll, mais un risque que le contenu déborde du conteneur.

ou

overflow: hidden;

qui n'affichera ni la barre de scroll, ni le contenu en excès.

Ces instructions sont acceptées par tous les navigateurs ; pas besoin de ::-webkit-scrollbar .

Et sinon, "esthétique" s'écrit ainsi... Tu peux corriger ton titre...

   Je souhaite tout de même conserver la fonction de scroll. (Et excusez moi pour la petite faute de frappe...)

Lucky13 a écrit:

Hello,

Heu... je vais peut-être dire une bêtise, mais si FF est à jour je ne voir guère de différence au niveau du scroll bar ?

Et je suis la aussi en accords, pourquoi vouloir la modifier ? l'utilisateur connait son navigateur et à ses habitudes.

Lamecarlate a écrit:

Bonjour,

> qui n'affichera ni la barre de scroll, ni le contenu en excès.

et empêchera de scroller, attention. Possible (probable) perte d'utilisabilité. Je ne conseille pas.

MicheleSantanche, pourquoi veux-tu cacher cette barre, exactement ? Peut-on voir une capture d'écran du site, pour comprendre pourquoi ça "fait tache" ?


Le thème du site étant sombre, transparent, le barre est très moche étant toute blanche et complètement opaque. Peut importe du site, je veut juste la retirer. 

Nerwy.







Staff 16 avril 2018 à 13:11:20

Cette barre est habituellement tout à droite de la fenêtre, elle n'est pas "dans" le site, elle ne devrait pas déranger. Ou alors tu as fait quelque chose de spécifique ? Tu ne veux vraiment pas nous montrer ?
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
16 avril 2018 à 20:13:34

Lamecarlate a écrit:

Cette barre est habituellement tout à droite de la fenêtre, elle n'est pas "dans" le site, elle ne devrait pas déranger. Ou alors tu as fait quelque chose de spécifique ? Tu ne veux vraiment pas nous montrer ?


Alors, oui. Voici un autre exemple en plus du fait que ça fasse tache: https://imgur.com/a/hua7P Mon site compte plus de 60-70 boutons de ce style, du coup au lieu de rajouter les 5-6 pixels qu'il faut à chaque bouton je préfère enlever la scrollbar question de praticité. (Ça peut paraître c*n mais cette scrollbar me donne tellement de soucis que je préfère carrément la virer).
Staff 16 avril 2018 à 20:30:48

De ce que je comprends de ta capture, c'est parce que la scrollbar de Firefox diminue la largeur de la fenêtre d'un pouillième par rapport à Chrome ? Et donc que les boutons sont légèrement plus courts ? Est-ce que c'est bien ça ou est-ce que je me fourvoie ?
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
16 avril 2018 à 21:11:03

Lamecarlate a écrit:

De ce que je comprends de ta capture, c'est parce que la scrollbar de Firefox diminue la largeur de la fenêtre d'un pouillième par rapport à Chrome ? Et donc que les boutons sont légèrement plus courts ? Est-ce que c'est bien ça ou est-ce que je me fourvoie ?


C'est bien cela.
Staff 16 avril 2018 à 21:37:06

Tu as déjà regardé ton site sur une fenêtre non maximisée ? Sur un autre écran, un autre ordinateur, une tablette, un téléphone ?

Ça ne tombera jamais juste si tu réfléchis comme ça…

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
17 avril 2018 à 7:28:44

Lamecarlate a écrit:

Tu as déjà regardé ton site sur une fenêtre non maximisée ? Sur un autre écran, un autre ordinateur, une tablette, un téléphone ?

Ça ne tombera jamais juste si tu réfléchis comme ça…

Si tu parle du bouton, si, il est tout à fait responsive. Mais la scrollbar casse ce responsive.... 

Staff 17 avril 2018 à 7:40:54

Dans ce cas, définis ton breakpoint un tout petit peu plus bas, pour que ça rentre partout. Et je ne vois pas comment ça peut être "responsive" si tu empêche de scroller - toutes tes pages rentrent parfaitement dans un écran de téléphone ?

Nous n'avons pas le contexte (aucun code, un micro-screenshot). Je peux seulement dire que ça me semble une très mauvaise idée que d'enlever la fonctionnalité principale des sites web pour une histoire de trois pixels de dépassement…

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
17 avril 2018 à 8:14:36

Lamecarlate a écrit:

Dans ce cas, définis ton breakpoint un tout petit peu plus bas, pour que ça rentre partout. Et je ne vois pas comment ça peut être "responsive" si tu empêche de scroller - toutes tes pages rentrent parfaitement dans un écran de téléphone ?

Nous n'avons pas le contexte (aucun code, un micro-screenshot). Je peux seulement dire que ça me semble une très mauvaise idée que d'enlever la fonctionnalité principale des sites web pour une histoire de trois pixels de dépassement…

Non, justement. Je ne me suis pas bien fait comprendre pardonnez moi. Une solution pour retirer intégralement la barre de scrollbar existe bien sur fitefox et je la connais, le soucis est quelle enleve justement la fonction de scrollbar. 

Or moi je veux cacher la barre de scroll mais tout en laissant la fonction de scroll avec la molette de souris. 

Staff 17 avril 2018 à 8:24:57

> Or moi je veux cacher la barre de scroll mais tout en laissant la fonction de scroll avec la molette de souris.

Et ça n'est pas possible, désolée.

Le webkit-scrollbar que tu as utilisé n'est de plus pas standard : https://caniuse.com/#feat=css-scrollbar (et c'est d'ailleurs agaçant qu'il soit implémenté dans autant de trucs sans avoir été spécifié proprement, maiiiiis c'est du webkit, quoi, Google mange le web navigateur par navigateur)(veuillez excuser cet accès de grognerie)

Cependant, même si on cache la scrollbar en gardant la fonction de scroll, la présence de ladite scrollbar est une indication pour les visiteur⋅euses qu'on peut scroller, justement. Autant sur téléphone elle est cachée par défaut parce que vu la taille de l'écran, on *sait* qu'il faut défiler, autant sur un grand écran, on ne le sait pas forcément.

Je comprends la problématique, mais je t'invite à lâcher du lest côté design, à retravailler un tout petit peu tes points de rupture pour que tes éléments soient bien entiers tout le temps - ça se joue vraiment à peu.

Et pardon d'avoir pris la mouche si vite… je suis assez sensible au fonctionnel et à l'accessibilité, et je démarre au quart de tour quand je lis quelque chose qui *pourrait* la diminuer.

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
17 avril 2018 à 12:34:29

Lamecarlate a écrit:

> Or moi je veux cacher la barre de scroll mais tout en laissant la fonction de scroll avec la molette de souris.

Et ça n'est pas possible, désolée.

Le webkit-scrollbar que tu as utilisé n'est de plus pas standard : https://caniuse.com/#feat=css-scrollbar (et c'est d'ailleurs agaçant qu'il soit implémenté dans autant de trucs sans avoir été spécifié proprement, maiiiiis c'est du webkit, quoi, Google mange le web navigateur par navigateur)(veuillez excuser cet accès de grognerie)

Cependant, même si on cache la scrollbar en gardant la fonction de scroll, la présence de ladite scrollbar est une indication pour les visiteur⋅euses qu'on peut scroller, justement. Autant sur téléphone elle est cachée par défaut parce que vu la taille de l'écran, on *sait* qu'il faut défiler, autant sur un grand écran, on ne le sait pas forcément.

Je comprends la problématique, mais je t'invite à lâcher du lest côté design, à retravailler un tout petit peu tes points de rupture pour que tes éléments soient bien entiers tout le temps - ça se joue vraiment à peu.

Et pardon d'avoir pris la mouche si vite… je suis assez sensible au fonctionnel et à l'accessibilité, et je démarre au quart de tour quand je lis quelque chose qui *pourrait* la diminuer.

D'accord tempis, je me débrouillerais sans. C'est effectivement un peu dérangeant mais on doit faire avec. 

Merci tout de même de votre aide. 

Bonne journée. 

Petit soucis esthétique de scrollbar

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown