C'est comme ça que je fais défiler

Comment savoir si une page Web (ou un élément spécifique) est défilable? La présence d'une barre de défilement est un indicateur clair. Alors que les débats sur le contenu "au-dessus du pli" persistent, la fonction et la signification d'une barre de défilement sont généralement comprises.

Cependant, les barres de défilement sont souvent cachées. MacOS, par exemple, les cache à moins que le fait de faire défiler activement. Les navigateurs mobiles manquent souvent de barres de défilement visibles, même lorsqu'elles overflow: scroll; est appliqué.

Ceci est significatif car une zone de défilement non détectée peut masquer un contenu ou une fonctionnalité cruciale.

Considérez l'anecdote "parfaitement recadré" de Tyler Hall. Un écran iOS avec des fonctionnalités essentielles nécessitait un défilement, mais n'a fourni aucun repère visuel indiquant cela. La conséquence? La mère de Tyler ne pouvait pas localiser la fonctionnalité familière - une défaillance significative de l'utilisabilité.

Bien qu'il existe des méthodes pour détecter et forcer les barres de défilement visibles, elles présentent des inconvénients. Ils pourraient remplacer les préférences des utilisateurs, exiger la manipulation DOM et s'appuyer sur des CSS préfixés des fournisseurs potentiellement obsolètes.

L'approche de Chris Smith offre une alternative supérieure:

Les techniques basées sur l'ombre sont particulièrement efficaces. Une ombre en coffre-fort suggère clairement du contenu sous-jacent, l'ombre elle-même agissant comme un repère visuel pour la direction de défilement. Cette méthode CSS uniquement offre un excellent contrôle et adaptabilité à divers contextes d'interface utilisateur. C'est une astuce CSS intelligente qui évite complètement JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!