Comment empêcher les sauts vers le haut lors du défilement dynamique d'un DIV vers le bas en utilisant uniquement CSS ?

Défilement dynamique du DIV vers le bas tout en empêchant les sauts vers le haut

Aperçu du problème

Vous souhaitez établir un élément DIV qui automatiquement fait défiler vers le bas lors du chargement et maintient cette position de défilement à moins que l'utilisateur ne fasse défiler vers le haut. Ce comportement est nécessaire pour mettre à jour dynamiquement le contenu au sein du DIV, garantissant que le contenu nouvellement ajouté reste visible en bas sans sauts brusques vers le haut.

Solution

Un CSS -seule solution peut atteindre ce comportement souhaité :

Étape 1 : Configuration de Flexbox

Utilisez flex-direction: column-reverse pour inverser le flux du contenu dans la DIV . Cela oblige le navigateur à traiter le bas comme le haut, faisant défiler efficacement vers le bas au départ.

Étape 2 : Inversion du balisage

Étant donné que l'ordre du contenu est inversé, assurez-vous que le balisage est structuré dans l'ordre inverse, avec le contenu que vous souhaitez afficher en bas en premier.

Code CSS :

<code class="css">.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}</code>

Code HTML :

<code class="html"><div class="container">
  <div>Bottom</div>
  <div>Hi</div>
  <!-- Additional content here -->
  <div>Top</div>
</div></code>

Explication :

Avec cette configuration, le contenu défile initialement jusqu'à l'élément "Bas". Lorsqu'un nouveau contenu est ajouté dynamiquement, il est placé au "Bas" de la DIV et la disposition flexbox fait automatiquement défiler la DIV vers le bas, tout en l'empêchant de sauter vers le haut lorsque l'utilisateur revient vers le bas.

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!