Sur Mac, affichez vos barres de défilement

Ce que macOS masque

Par défaut, macOS n'affiche les barres de défilement que pendant le défilement. Le reste du temps, elles disparaissent et se superposent au contenu sans occuper d'espace. C'est discret, et c'est ce que voient la plupart des designers, qui travaillent sur Mac.

Or nos utilisateurs ne sont pas tous sur Mac. Dans la plupart des navigateurs sous Windows, les barres restent affichées en permanence et occupent une quinzaine de pixels à côté du contenu. Ce que nous voyons sur nos écrans en est la version la plus flatteuse.

Le réglage

Dans Réglages Système > Apparence > Afficher les barres de défilement, choisir « Toujours ».

L'interface est un peu moins élégante, mais je préfère repérer les problèmes avant les utilisateurs Windows.

Ce que les barres révèlent

Une barre de défilement inattendue signale presque toujours un dépassement : un élément plus large que son conteneur, un texte qui ne revient pas à la ligne, une marge négative oubliée. Avec les barres masquées, ces défauts restent invisibles. Pour trouver l'élément en cause, Pesticide dessine le contour de chaque bloc.

J'en ai trouvé un sur mon propre site en rédigeant cette note. Dans un article, un bloc de code est légèrement trop large pour sa colonne. Barres masquées, on ne voit que la dernière colonne coupée :

Barres affichées, le bloc gagne une barre horizontale de 15 pixels, et toute la page se décale de la largeur de la barre verticale :

Les barres révèlent aussi les zones qui défilent sans l'indiquer (une colonne latérale, une modale), les décalages de mise en page entre une page courte sans barre et une page longue avec barre, et les libellés tronqués plus tôt parce que la colonne a perdu 15 pixels.

Quelques correctifs

• overflow: auto plutôt que overflow: scroll, pour qu'une barre n'apparaisse que si le contenu dépasse
• scrollbar-gutter: stable sur la page, pour réserver la place de la barre et éviter les décalages
• min-width: 0 sur les enfants d'une grille ou d'un conteneur flex, un oubli fréquent qui empêche un contenu de rétrécir
• overflow-wrap: anywhere pour les longues adresses et les noms de fichiers
• scrollbar-width: thin pour des barres plus discrètes, sans les supprimer

Tester sans changer le réglage

Dans Chrome, une règle ::-webkit-scrollbar ajoutée dans les DevTools force des barres classiques, comme sous Windows. Si le site déclare scrollbar-width ou scrollbar-color, ces propriétés standard prennent le dessus et doivent être neutralisées pour voir le résultat.