Comment puis-je faire défiler un Div vers le bas lors du chargement et maintenir la position de défilement de l'utilisateur en utilisant uniquement CSS ?

Div à défilement dynamique synchronisé avec le défilement de l'utilisateur

Recherche d'une solution pour un div qui défile automatiquement vers le bas lors de son chargement, en conservant son position de défilement jusqu'à ce que l'utilisateur fasse défiler manuellement vers le haut ? Cette question ingénieuse explore une technique intelligente uniquement CSS pour obtenir cet effet.

Comprendre la solution

Le secret réside dans l'inversion de l'ordre des éléments dans le div à l'aide de flex -direction : colonne inversée. Essentiellement, le navigateur traite le bas du div comme s'il s'agissait du haut.

Implémentation

Pour implémenter cette technique, créez un conteneur avec débordement : auto et set flex-direction: column-reverse dans ses styles CSS :

.container {
  height: 100px;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

Ensuite, assurez-vous que le contenu dynamique est placé dans l'ordre inverse dans le conteneur :

<div class="container">
  <div>Bottom</div>
  <div>...</div>
  <div>Top</div>
</div>

Mise en garde

Gardez à l'esprit que cette technique ne fonctionne que dans les navigateurs prenant en charge Flexbox.

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!