Javascript Ajouter Supprimer La Classe Sur Le Défilement

| | | | | | | | | | | | | | | | | |

Les barres de défilement et l’ expérience utilisateur

Les utilisateurs sont maintenant habitués à une certaine expérience lors de la navigation des sites Web. Par exemple, vous attendez un logo de l’ entreprise dans le coin en haut à gauche d’un site pour vous emmener à la page d’accueil. Mais si ça ne fonctionne pas? Et si tout ce sur ce site a fait opposé de ce que vous pensé que ce serait?

Imaginez s’il y avait une barre de défilement, mais lorsque vous déplacez le bouton de défilement de votre souris ou faites glisser votre doigt sur le pavé tactile de votre appareil, rien ne se passe . Il serait considéré comme une expérience utilisateur horrible.

Qu’est - ce que fait ou casse une bonne expérience utilisateur peut être un poste dans son propre droit, mais une partie de celui - ci fonctionne très certainement la capacité et les barres de défilement pour les cacher pour des raisons esthétiques.

Les barres de défilement sont grands indicateurs de ce que nous pouvons nous attendre à voir sur une page Web. Si l’ on voit une barre de défilement, nous nous attendons qu’il soit nécessaire de faire défiler vers le bas pour afficher le contenu. Quand on ne voit pas une barre de défilement, il est généralement pour l’ une des deux raisons:

  1. Ce que vous voyez est ce que vous obtenez - la hauteur et la largeur de la zone visible (l’écran ) correspondent à la hauteur et la largeur du site.
  2. La conception du site comprend une sorte de flèche ou de la fonction d’ animation qui indique que plus le contenu est disponible via le défilement. Seulement quand on commence le défilement apparaaît la barre de défilement. La valeur par défaut est de rester caché jusque - là.
  3. En tant que développeur, mettre en ≈ìuvre l’ utilisation correcte de la barre de défilement permettra d’ améliorer l’expérience utilisateur d’un site, ce qui gardera les clients sur le site.

Note Side: assurez-vous d’ utiliser les barres de défilement horizontal lorsque intentionnellement vous voulez les utiliser. Si elles apparaissent sans le vouloir sur votre site, il est généralement parce que quelque chose ne va pas avec le dimensionnement des composants. Ne pas cacher les barres de défilement horizontal sur le but quand ils ne devraient pas être présents.

implémentation CSS

La première chose à noter à propos de cette mise en ≈ìuvre est que tous les principaux navigateurs sont créés égaux . Ce qui fonctionne pour Firefox ne fonctionnera pas pour Chrome ou Internet Explorer et vice versa. Utilisations CSS ce que nous appelons fournisseur préfixes ou navigateur préfixes pour nous aider à fournir un soutien pour plusieurs navigateurs. Nous les présentons ci - dessous:

Cheat Sheet préfixe fournisseur

préfixe fournisseur Navigateur couvrant
-webkit- Chrome, Safari, les nouvelles versions de Opera et la plupart des navigateurs iOS, y compris Firefox pour iOS
-moz - Firefox (non iOS)
-o- Les anciennes versions de Opera
-ms- Internet Explorer et MS Arête

URL: crédit: MDN - Prefixes CSS

Alt Text: Mozilla Developer Network a créé une feuille de triche pratique pour se rappeler quel préfixe à utiliser

Légende: MDN a créé une feuille de triche pratique pour se rappeler quel préfixe à utiliser pour le navigateur

La question devient alors, comment pouvons-nous savoir quand nous avons besoin de préfixes et lorsqu’ils ne sont pas? Créateurs CSS sont toujours expérimentent de nouvelles propriétés et de nouvelles façons de faire les choses - s’il y a une nouvelle propriété assez, il est probablement pas encore compatible avec tous les navigateurs.

Heureusement, il existe des outils qui jeter un oeil à votre CSS et ajouter les préfixes dont vous avez besoin. Vous pouvez aussi le faire manuellement et utiliser un site comme caneuse ou documents pour vous MDN aider à déterminer la compatibilité du navigateur.

< / a>

Let code

Quand nous courons ce code dans Chrome, il doit produire un fond gris div et un texte que vous peut faire défiler. Les deux implémentations les plus courantes sont incluses - Firefox est en haut du code dans le