Maîtriser le dégradé de défilement de débordement avec CSS-tutoriel CSS-php.cn

Introduction

Cet article couvre les compétences techniques suivantes :

Mastering Overflow Scroll Gradient with CSS

Dans cet atelier, nous apprendrons comment ajouter un dégradé à un élément débordant à l'aide de CSS. L'objectif de cet atelier est de créer un signal visuel pour les utilisateurs indiquant qu'il y a davantage de contenu à faire 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.

Dégradé de défilement de débordement

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

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

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

Voici un exemple d'extrait de code HTML et CSS :

  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
 Iure id exercitationem nulla qui repellat laborum vitae, 
 molestias tempora velit natus. Quas, assumenda nisi. 
 Quisquam enim qui iure, consequatur velit sit? 
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Iure id exercitationem nulla qui repellat laborum vitae, 
 molestias tempora velit natus. Quas, assumenda nisi. 
 Quisquam enim qui iure, consequatur velit sit?

Copier après la connexion

.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; }

Copier après la connexion

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'ongletWeb 8080pour prévisualiser la page Web.

Résumé

Félicitations ! Vous avez terminé l'atelier Dégradé de défilement de débordement. Vous pouvez pratiquer davantage de laboratoires dans le LabEx pour améliorer vos compétences.

Mastering Overflow Scroll Gradient with CSS