Une barre de défilement (barre de défilement) est un mécanisme simple mais efficace qui agit comme un moyen principal par lequel vous pouvez afficher des documents volumineux. Mais ce n'est pas tout ce dont les barres de défilement sont capables! Ces chevaux de bataille modestes sont également assez bons pour dire aux utilisateurs quelle est la taille des documents avec lesquels ils interagissent. En conséquence, les barres de défilement portent une double charge. Ils aident à travailler avec différents matériaux et informent l'utilisateur de la taille de ces matériaux.
La logique simple et compréhensible des barres de défilement peut être modifiée pendant la mise en œuvre des mécanismes de détournement de défilement. Cela se produit lorsque le comportement standard de la barre de défilement change, ce qui viole la correspondance attendue par l'utilisateur entre la longueur du document et la hauteur de la barre de défilement.
De plus, les programmes pour les appareils à écran tactile ont popularisé l'idée de masquer les barres de défilement. Avec cette approche, les barres de défilement sont invisibles jusqu'à ce que l'utilisateur commence à faire défiler un élément qui ne tient pas dans une certaine zone de visualisation. En conséquence, il s'avère que, dans un souci d'attrait visuel des applications, les concepteurs sacrifient la clarté des interfaces. L'utilisateur peut avoir besoin d'un certain temps pour comprendre que le contenu d'un certain conteneur peut défiler. Un tel conteneur peut sembler ne pas prendre en charge le défilement, ou comme s'il n'a tout simplement pas besoin de défilement.
Les systèmes d'exploitation de bureau classiques ont adopté cette tendance mobile, essayant de minimiser l'interférence des barres de défilement traditionnelles dans la conception des applications.
Le matériel, dont nous publions la traduction aujourd'hui, est consacré à certaines fonctionnalités de l'utilisation des barres de défilement dans les applications Web.
Quelques terminologies
Avant de continuer - définissons quelques termes que nous utiliserons ici. À savoir, nous distinguons deux types de barres de défilement:
- Barres de défilement fixes (intrusives) - celles qui occupent l'espace de l'écran. Ils ne chevauchent pas le contenu que vous consultez, mais plutôt à côté d'eux.
- Barres de défilement non fixes (discrètes) - celles qui chevauchent le contenu. Ils ne retirent pas l'espace de l'écran de ce qui se trouve dans les conteneurs auxquels ils appartiennent.
Comportement standard des barres de défilement modernes
Par défaut, les barres de défilement iOS et Android ne sont pas fixées.
Dans macOS (en particulier, nous parlons de macOS Mojave pertinent au moment de la rédaction de ce document), les barres de défilement sont masquées jusqu'au moment où l'élément commence à défiler. Il s'agit du comportement standard du système dans une situation où une souris n'est pas connectée à l'ordinateur. Il existe trois options pour afficher les barres de défilement (les paramètres correspondants se trouvent dans
General > System Preferences ).
Paramètres de la barre de défilement dans macOS MojaveIl a été découvert que ces paramètres contrôlent le comportement des barres de défilement dans Chrome, Firefox et dans le nouveau Edge basé sur Chromium.
Voici une vidéo que vous pouvez regarder pour savoir comment les paramètres ci-dessus affectent les barres de défilement et comment les barres de défilement, en plus de vous permettre de faire défiler le contenu, l'affectent. Voici quelques extraits de cette vidéo.
La barre de défilement fixe dans macOS est toujours visible et occupe un peu d'espace à l'écranLa barre de défilement non fixe de MacOS recouvre le contenu lors du défilement d'un documentLa barre de défilement non fixée dans macOS est masquée au moment où le document n'est pas défiléDans Windows 10, dans
Settings > Display > Simplify and personalize Windows , vous pouvez trouver des paramètres similaires.
Paramètres de la barre de défilement dans Windows 10Malheureusement, même lorsque
Automatically hide scroll bars in Windows , cela n'affecte pas Firefox, Chrome, Internet Explorer et Edge. Dans le cas d'Edge, nous parlons à la fois de la variante de navigateur basée sur Chromium et de la variante basée sur EdgeHTML.
Aperçu des tâches
Voici à quoi ressemble la page que nous avons examinée ci-dessus sur macOS sous Windows.
Page de barre de défilement WindowsLes barres de défilement de Windows sont fixées par défaut. De plus, ils ont l'air assez «lourds» en termes de design. Ils, dans leur version standard, sont beaucoup plus larges que leurs homologues de macOS. En outre, la couleur des barres de défilement dans Windows correspond généralement aux paramètres système et non à la palette de couleurs d'une page Web.
Les concepteurs qui sont habitués à l'environnement macOS, mais qui développent des applications Web conçues pour différentes plates-formes, peuvent avoir du mal à faire en sorte que leurs projets soient beaux dans différents systèmes d'exploitation et ne dépensent pas trop de ressources système pour le rendu.
Exigences du projet
Nous voulons développer une application web dont les barres de défilement diffèrent par les fonctionnalités suivantes:
- Ils devraient être attrayants lors de la visualisation de pages sur un système d'exploitation de bureau. Ceci est particulièrement important lors de l'affichage de conteneurs dont le contenu ne s'y adapte pas entièrement. Les barres de défilement sont affichées à l'intérieur de ces conteneurs, ce qui signifie que la conception de ces barres de défilement doit être en bon accord avec la conception des conteneurs. Nous pensons que dans le cas des barres de défilement qui vous permettent de faire défiler la page entière, ce n'est pas si important, mais c'est sans aucun doute une question controversée.
- Nous voulons minimiser l'espace d'écran qu'une barre de défilement peut occuper. Sous Windows, les barres de défilement, par défaut, sont fixes et très larges.
- Nous voulons nous concentrer sur les paramètres système. Si l'utilisateur sélectionne une option non standard dans les paramètres qui définit le comportement des barres de défilement, nous devons en tenir compte dans la mesure du possible.
- Nous nous efforçons d'éviter l'utilisation de solutions JavaScript lourdes (comme le très joli plugin OverlayScrollbars ), conçues pour fonctionner avec des barres de défilement non fixées. Ils créent une charge considérable sur les ordinateurs clients.
Jusqu'où puis-je aller avec CSS?
Voici le code de l'élément conteneur auquel la classe des
overflowing-element est affectée, ainsi que le code CSS pour le styliser:
<div class="overflowing-element"></div> .overflowing-element { overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; }
Si vous avez besoin de barres de défilement non fixées dans Internet Explorer et dans Edge basées sur EdgeHTML, cela signifie que la
-ms-overflow-style: -ms-autohiding-scrollbar; . Avec son utilisation, tout fonctionnera comme il se doit (c'est assez simple - non?).
Lorsque iOS 13 est sorti, il s'est avéré que la propriété
-webkit-overflow-scrolling: touch n'était peut-être pas nécessaire pour améliorer la physique du défilement. Cependant, si vous devez prendre en charge les anciennes versions d'iOS, il est préférable de ne pas refuser d'utiliser cette propriété.
Si nous parlons des propriétés CSS liées au défilement, il peut être utile de lire la propriété de
comportement de défilement excessif . Il vous permet de contrôler le comportement du système lorsque vous atteignez la bordure de l'élément qui prend en charge le défilement.
▍Firefox
Le navigateur Firefox prend en charge les propriétés CSS sans préfixe. Il s'agit
de la couleur de la barre de défilement et
de la largeur de la barre de défilement .
L'exemple suivant utilise des variables CSS qui ne sont pas prises en charge dans Internet Explorer 11 pour plus de clarté:
:root { --scrollbar-track-color: transparent; --scrollbar-color: rgba(0,0,0,.2); --scrollbar-width: thin; } .overflowing-element { scrollbar-width: var(--scrollbar-width); scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color); }
▍Chrome et Safari, navigateur Edge basé sur Chromium et autres navigateurs
Les navigateurs Webkit et Blink prennent en charge des
pseudo-éléments personnalisés conçus pour personnaliser les barres de défilement:
:root { --scrollbar-track-color: transparent; --scrollbar-color: rgba(0,0,0,.2); --scrollbar-size: .375rem; --scrollbar-minlength: 1.5rem; } .overflowing-element::-webkit-scrollbar { height: var(--scrollbar-size); width: var(--scrollbar-size); } .overflowing-element::-webkit-scrollbar-track { background-color: var(--scrollbar-track-color); } .overflowing-element::-webkit-scrollbar-thumb { background-color: var(--scrollbar-color); } .overflowing-element::-webkit-scrollbar-thumb:vertical { min-height: var(--scrollbar-minlength); } .overflowing-element::-webkit-scrollbar-thumb:horizontal { min-width: var(--scrollbar-minlength); }
Voici un exemple sur CodePen, démontrant la possibilité de personnaliser les barres de défilement, effectuées exclusivement par CSS. Et
voici un exemple qui illustre le comportement standard des barres de défilement. Vous pouvez les comparer.
Il convient de noter que le code ci-dessus présente un problème. Il consiste en ce que lors de la définition des propriétés de
height ou de
width du pseudo-élément
::-webkit-scrollbar dans macOS, la
::-webkit-scrollbar non fixe est remplacée par une
::-webkit-scrollbar fixe (les paramètres standard sont redéfinis). Cependant, ce n'est pas difficile à résoudre avec un petit morceau de code JavaScript.
CSS et un peu de JS
Nous pouvons ajouter une petite quantité de code JavaScript au projet, ce qui nous permet de savoir si la barre de défilement standard est fixe ou non. Cela ressemble à ceci:
var parent = document.createElement("div"); parent.setAttribute("style", "width:30px;height:30px;"); parent.classList.add('scrollbar-test'); var child = document.createElement("div"); child.setAttribute("style", "width:100%;height:40px"); parent.appendChild(child); document.body.appendChild(parent);
Si la barre de défilement est fixe, nous ajoutons la classe
layout-scrollbar-obtrusive à l'élément de document de
body . Cette classe peut être utilisée pour ajuster les propriétés de
width et de
height des barres de défilement fixes uniquement. Cela évite l'interférence décrite ci-dessus dans le comportement des barres de défilement. Au cours de cette intervention, les barres de défilement changent et le projet s'éloigne des paramètres système définis par l'utilisateur. Voici le style de la
layout-scrollbar-obtrusive :
.layout-scrollbar-obtrusive .layout-scrollbar::-webkit-scrollbar { height: var(--scrollbar-size); width: var(--scrollbar-size); }
Vous trouverez ici un exemple d'application d'une technique qui utilise CSS et JavaScript ensemble.
Voici , à titre de comparaison, un exemple qui illustre le comportement standard d'un système.
Résumé: un examen de la solution au problème
Sur les appareils avec écrans tactiles qui utilisent des barres de défilement non fixées (c'est-à-dire sur les appareils iOS et Android), nous utilisons simplement le comportement standard des barres de défilement.
Sous macOS, nous avons la possibilité de prendre en compte les paramètres système définis par l'utilisateur. Cela signifie que nous ne basculons pas par inadvertance entre les barres de défilement non fixes et fixes. Nous appliquons des styles uniquement aux barres de défilement fixes qui sont toujours visibles. Cela nous permet d'adapter l'apparence des pages à nos exigences de conception de projet.
Sur Windows, à savoir dans les navigateurs Firefox et Chrome, il n'y a pas de barres de défilement non fixées standard, mais ici, comme dans d'autres cas, nous pouvons appliquer notre approche, qui utilise exclusivement des fonctionnalités CSS. Étant donné que nous avons pu proposer des exemples pratiques d'utilisation de barres de défilement personnalisables avec CSS, nous avons pu conclure un accord avec notre équipe de conception. Nous avons trouvé un compromis et évité d'utiliser des solutions JavaScript lourdes.
Voici les projets de démonstration, dont l'essence a été décrite ci-dessus:
- Affichage du comportement standard de la barre de défilement.
- Une solution qui utilise uniquement CSS. Toutes les barres de défilement sont stylisées.
- Une solution qui utilise CSS et JavaScript. Seules les barres de défilement fixes sont stylisées.
Chers lecteurs! Comment stylisez-vous les barres de défilement dans vos projets?
