Crache de défilement sur volant

La conception des barres de défilement Web devrait prendre en compte l'expérience utilisateur et l'accessibilité. D'une manière générale, si une zone doit être défilée, la barre de défilement doit être affichée. Cependant, le monde en ligne est en constante évolution, et certaines techniques intelligentes peuvent améliorer l'expérience utilisateur. Cet article introduira une méthode pour rendre la barre de défilement cachée par défaut et afficher uniquement lorsque la souris est en plane.

Cette méthode a été proposée par Thomas Gladdines et dans mes tests, il a bien fonctionné sur les navigateurs Chrome, Firefox et Safari, non affectés par les paramètres du système macOS, et a une bonne compatibilité.

Le principe central consiste à utiliser une couche de masque pour couvrir la barre de défilement. En créant une couche de masque qui est exactement la même largeur que la barre de défilement (en supposant que la largeur est de 17px ici, la largeur réelle peut avoir besoin d'être calculée par script) et définir la hauteur suffisante, la barre de défilement peut être parfaitement cachée. Il peut même transmettre l'animation du positionnement de la couche de masque pour simuler l'effet des émergences progressivement, ce qui est très intelligent.

Il convient de noter que cela fait référence à la barre de défilement native de l'élément, pas à la faussebar de défilement. Forger des barres de défilement est également une solution réalisable. Ben Nadel a introduit une fois la mise en œuvre de Slack. La méthode de Slack consiste à forcer le rendu de la barre de défilement vers une zone cachée par overflow , puis à créer une barre de défilement virtuelle pour simuler la barre de défilement native, gagnant ainsi plus de contrôle sur la barre de défilement. Il s'agit d'une approche différente que de forcer la barre de défilement à rendre. De plus, cette approche ne vous empêche pas de styliser la barre de défilement, qui peut avoir certains avantages, comme spécifier exactement la largeur de la barre de défilement.

1. À ce jour, les instructions de MacOS sont: "Si votre appareil prend en charge l'action des gestes, les barres de défilement seront cachées avant de commencer à faire défiler. Sinon, ils seront visibles."

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!