18041 sujets

Questions générales et questions de débutants

Forcer l'apparition de la scrollbar verticale

Bonjour à tous,

Je m'arrache les cheveux sur ce problème: je cherche (le client demande Smiley biggrin ) à forcer l'apparition de la scrollbar verticale sur une page de ce type:
http://cleaning.zooka.io/demo1/

J'ai essayé avec:
html {overflow: visible;}


Mais non... j'aimerai bien comprendre le problème ! Une idée ? Smiley rolleyes

Un grand merci d'avance
Bonjour.

J'avoue que je ne comprends pas. La barre verticale est bien là... puisque le contenu de la page excède la hauteur de l'écran. Je précise que je consulte le site mis en lien sur un ordinateur de bureau. Ceci explique peut-être cela.

Smiley smile
Re-bonjour,

Merci pour ton retour.

Je viens de comprendre, c'est une histoire de navigateur web.
Avec Firefox, la scrollbar est bien présente.
Elle disparaît avec Chrome à cause de ceci:
body::-webkit-scrollbar {
    width: 0 !important;
}


Maintenant je n'arrive pas à écraser cela en personnalisant mon CSS... Une idée ?
D'où vient cette règle ?

Une règle CSS qui est chargée après à condition d'être de poids équivalent ou supérieure vient écraser une règle précédemment écrite...

Smiley smile
Modérateur
(p.s. : ce code vient de la feuille de style de base du navigateur)

arn068 a écrit :

Je viens de comprendre, c'est une histoire de navigateur web.
Avec Firefox, la scrollbar est bien présente.
Elle disparaît avec Chrome à cause de ceci:

Pas seulement, c'est aussi lié à l'OS. Les barres de défilement étant généralement des composants de l'OS, leur fonctionnement dépend du navigateur ET de l'OS. C'est très risqué d'aller bricoler là-dedans, le comportement peut beaucoup varier et peut changer lors d'une mise à jour (OS, navigateur, etc. ) sans parler des batteries de cas et de tests à faire.

Une bonne pratique est de ne rien faire: Si l'utilisateur utilise un OS/navigateur qui cache les barres de défilement par défaut, c'est son problème.
Modifié par kustolovic (03 Oct 2016 - 14:21)
ah j'avais pas compris que c'était intégré au nav... mince..

Par contre "c'est son problème" n'est pas une solutions valable. il doit bien y avoir une solution un peu plus viable Smiley smile
Bonjour et merci de vous intéresser à mon problème. Smiley smile

JENCAL: pour le moment j'ai simplement supprimé la partie du code CSS directement dans le fichier CSS, mais ce n'est pas viable à long terme, notamment en cas de mise à jour du CSS (template Wordpress).
J'aimerais simplement ajouter un bout de code dans mon CSS perso pour écraser cette partie.

kustolovic: d'après mes tests, c'est surtout lié au navigateur et pas nécessairement à l'OS.
Le fichier CSS confirme cela.
L 'argument, "c'est le problème de l'utilisateur" ne me convient pas , ni à moi ni à mon client ! Smiley biggrin

jquery je ne maîtrise pas du tout.

Ça me rend dingue c'est de ne pas trouver la simple ligne de code CSS pour écraser le fichier précédent comme je le fais pour tout autre modif CSS ! Smiley langue

Ce que j'ai supprimé dans le CSS:
body::-webkit-scrollbar {
        width: 0 !important; // Chrome 
    }
    html {
	    -ms-overflow-style: none; // IE 10+ 
	}

Modifié par arn068 (03 Oct 2016 - 16:13)
et si tu mets dans ton fichier css (là où tu as deja fait tes modifs) 
width: auto !important;
Du mieux ! Smiley smile
La barre latérale apparaît, mais par contre par d'ascenseur, pas de fléches... juste une barre latérale blanche...
Mais on se rapproche, merci !
Modérateur
Désolé c'est moi qui ai compris de travers,

je n'avais pas compris que c'était un de tes styles qui cachait intentionnellement la barre (enfin un des styles de ton thème).
L'habitude de ne pas les voir (quel que soit le navigateur).

La solution la plus simple est d'enlever la ligne incriminée dans le thème.

Le «restyling» des scrollbars dans chrome nécessite de redéfinir toutes les valeurs, lorsqu'on modifie une propriété toutes les autres sont «réinitialisées».
Modifié par kustolovic (03 Oct 2016 - 18:11)
JENCAL: merci oui, j'ai commencé à me documenter sur webkit scrollbar

kustolovic: tu confirmes effectivement ce que je pense

thierry: j'avais testé ça au début mais ce n'était pas le problème

Conclusion: la meilleure (moins mauvaise) solution est de supprimer le code directement dans le css
Sujet clos
Aller à