Mobile Overflow: Auto fait cacher la barre de défilement: quelle est la raison et comment la résoudre?

Mobile CSS Scroll Bar à cachettes: Causes et solutions

Dans le développement mobile, l'affichage et la cachette des barres de défilement sont souvent un mal de tête. Cet article analysera un cas typique: overflow: auto fait que la barre de défilement ne soit pas automatiquement cachée du côté mobile et fournit une solution efficace.

Description du problème:

Dans un navigateur mobile, une structure div imbriquée est définie avec le overflow: auto Cependant, la situation réelle est: la barre de défilement est cachée normalement après le premier parchemin, mais elle est toujours affichée après le deuxième parchemin et ne peut pas disparaître automatiquement. Ce qui est encore plus déroutant, c'est qu'après avoir retiré border-radius de la div externe, le problème disparaît.

Exemple de code:

<div id="f" style="background:red;height:300px;width:100%;overflow:hidden;border-radius: 10px;">
    <div id="b" style="background:red;height:100%;width:100%;overflow:auto">
      <div id="c" style="background:rgb(188, 193, 194);height:100%;width:300%;">
        <p>Beaucoup de contenu texte ...</p>
      </div>
    </div>
  </div>

Analyse des problèmes et solution:

La cause profonde du problème réside dans le conflit entre border-radius de la div externe (id est f) et overflow: auto du div intérieur (id est b). border-radius provoque des problèmes de rendu, affectant le mécanisme caché de la barre de défilement.

Meilleure solution:

Au lieu de retirer border-radius de la div externe, une meilleure approche consiste à appliquer border-radius à la div intérieure (id est b) et à supprimer overflow: hidden de la div externe (id est f). Cela conserve non seulement l'effet d'angle arrondi de la div externe, mais résout également le problème de la cachette de la barre de défilement.

Le code modifié est le suivant:

<div id="f" style="background:red;height:300px;width:100%;border-radius: 10px;">
    <div id="b" style="background:red;height:100%;width:100%;overflow:auto; border-radius: 10px;">
      <div id="c" style="background:rgb(188, 193, 194);height:100%;width:300%;">
        <p>Beaucoup de contenu texte ...</p>
      </div>
    </div>
  </div>

Grâce aux ajustements ci-dessus, la barre de défilement du côté mobile peut être cachée normalement une fois le défilement terminé, tout en conservant le style d'angle arrondi de la div externe, en évitant la perte de style.

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!