Comment faire en sorte qu'une division de débordement défile toujours vers le bas, malgré l'ajout d'un nouveau contenu ?

Maintenir un div de débordement défilé vers le bas (sauf si l'utilisateur fait défiler vers le haut)

Dans certains scénarios, nous avons besoin d'un div pour faire défiler automatiquement vers le bas lors du chargement de la page et y restez jusqu'à ce que l'utilisateur fasse défiler vers le haut. Cependant, lorsque l'utilisateur fait défiler vers le bas, le div doit rester en bas malgré l'ajout de contenu dynamique.

Solution avec CSS

Une solution de contournement intelligente pour y parvenir Le comportement consiste à utiliser la propriété flex-direction: column-reverse de CSS. Cela demande au navigateur de traiter le bas du div comme le haut. Tant que le balisage HTML est dans l'ordre inverse, le navigateur veillera à ce que le contenu du bas soit toujours affiché.

Exemple de code

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

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

Avantages de cette approche

• Solution CSS pure, aucun JavaScript requis
• Compatible avec tous les navigateurs
• Prend en charge l'insertion de contenu dynamique
• Maintient la position de défilement même après un défilement vers le haut

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!