Maîtriser le dégradé de défilement d'éléments débordants avec CSS

Introduction

Dans ce laboratoire, nous allons apprendre à ajouter un dégradé poussant à un élément débordant à l'aide de CSS. Le but de ce laboratoire est de créer un indice visuel pour les utilisateurs indiquant qu'il y a plus de contenu à défiler. En utilisant le pseudo-élément ::after et la fonction linear-gradient(), nous pouvons créer un dégradé qui passe du transparent au blanc, indiquant qu'il y a du contenu supplémentaire à visualiser.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau intermédiaire avec un taux de réussite de 64%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Dégradé de défilement d'éléments débordants

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour ajouter un dégradé poussant à un élément débordant et indiquer qu'il y a plus de contenu à défiler, suivez ces étapes :

Utilisez le pseudo-élément ::after pour créer un linear-gradient() qui passe du transparent au blanc (du haut en bas).
Positionnez et dimensionnez le pseudo-élément dans son parent à l'aide de position: absolute, width et height.
Excluez le pseudo-élément des événements de souris en utilisant pointer-events: none, permettant ainsi le texte derrière lui d'être toujours sélectionnable/interactif.

Voici un extrait de code HTML et CSS exemple :

<div class="overflow-scroll-gradient">
  <div class="overflow-scroll-gradient-scroller">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit? <br />
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </div>
</div>

.overflow-scroll-gradient {
  position: relative;
}

.overflow-scroll-gradient::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 250px;
  height: 25px;
  background: linear-gradient(transparent, white);
  pointer-events: none;
}

.overflow-scroll-gradient-scroller {
  overflow-y: scroll;
  background: white;
  width: 240px;
  height: 200px;
  padding: 15px;
  line-height: 1.2;
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur le dégradé de défilement d'éléments débordants. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.