Nous avons tous l'habitude de voir une barre de défilement sur toutes les pages que nous visitons quotidiennement sur Internet.

Ils sont utiles et explicites. C'est très pratique mais pas agréable. Depuis un certain temps maintenant, tous les principaux navigateurs acceptent certains pseudo éléments CSS à personnaliser en fonction de l'apparence du défilement du navigateur.

Comme j'ai quelques morceaux de code qui défileront sur l'axe X et la page d'accueil qui défile sur l'axe Y, je voulais que cela soit un peu plus, approprié, avec le reste du site. Pour ce faire, j'ai ajouté du CSS à mon thème.

Si vous avez vu mon article précédent sur l'ajout de TypeScript et SCSS à Grav, vous n'aurez qu'à importer un autre script dans votre SCSS principal. Partout ailleurs, vous devrez ajouter le CSS suivant :

/* components/sidebar.scss */

@use '../variables' as *;

/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: $bg-color;
  outline: $primary-color-dark solid 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: $primary-color;
  outline: $primary-color-dark;
  border-radius: 50vh;
  transition: 1s ease-in-out;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: $primary-color-dark;
  border: 1px solid $primary-color;
}

Lors de la rédaction de cet article, Firefox ne prend pas en charge ces pseudos éléments CSS. Il prend cependant en charge une propriété depuis la version 64 qui nous rapprochera de ce que nous avons sur les autres navigateurs. J'ai ajouté ceci à la fin de mon fichier précédent :

/* Firefox properties */

* {
  scrollbar-color: $primary-color $bg-color;
}

Les couleurs sont maintenant correctes mais malheureusement on ne peut pas changer le rayon de la bordure pour l'instant.

Dans mon cas, ce fichier se trouve dans mon répertoire de composants appelé sidebar.scss, il importe un fichier SCSS contenant des variables de son répertoire parent :

$bg-color: #f1f1f1;
$bg-color-dark: darken($bg-color, 15%);

$primary-color: #ff6a1e;
$primary-color-dark: darken($primary-color, 15%);

Cela sera ensuite inclus dans mon fichier SCSS principal pour m'assurer qu'il sera ajouté à mon modèle HTML principal grâce à WebPack Encore

@use 'components/scrollbar';

Grâce à cela, mes barres de défilement seront désormais beaucoup plus proches du style de mon site :

  • Avant

before

  • Après

after