Mobiler Überlauf: Auto bewirkt, dass die Bildlaufleiste versteckt ist: Was ist der Grund und wie kann man sie lösen?

Mobile CSS Scroll Bar verbirgt Probleme: Ursachen und Lösungen

In der mobilen Entwicklung sind das Display und das Verstecken von Bildlaufleisten häufig Kopfschmerzen. In diesem Artikel wird ein typischer Fall analysiert: overflow: auto Attribut die Bildlaufleiste nicht automatisch auf der mobilen Seite versteckt und eine effektive Lösung bietet.

Problembeschreibung:

In einem mobilen Browser wird eine verschachtelte DIV -Struktur mit dem inneren Div -Set overflow: auto , und die Bildlaufleiste wird voraussichtlich nach Abschluss des Scrollens automatisch versteckt. Die tatsächliche Situation ist jedoch: Die Bildlaufleiste ist nach der ersten Bildlauf normalerweise versteckt, wird jedoch immer nach der zweiten Schriftrolle angezeigt und kann nicht automatisch verschwinden. Noch rätselhafter ist, dass das Problem nach dem Entfernen border-radius des äußeren Divs das Problem enthält.

Codebeispiel:

<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>Viel Textinhalt ...</p>
      </div>
    </div>
  </div>

Problemanalyse und Lösung:

Die Grundursache des Problems liegt im Konflikt zwischen border-radius Attribut der äußeren Div (ID ist f) und overflow: auto Attribut der inneren Div (ID ist b). border-radius verursacht Renderprobleme und beeinflussen den verborgenen Mechanismus der Scrollbar.

Bessere Lösung:

Anstatt border-radius aus dem äußeren Div zu entfernen, besteht ein besserer Ansatz darin, border-radius auf die innere Div (ID ist b) anzuwenden und overflow: hidden Eigenschaft der äußeren Div (ID ist f). Dies behält nicht nur den abgerundeten Eckeffekt des äußeren Divs bei, sondern löst auch das Problem des Versteckens von Scrollstangen.

Der geänderte Code lautet wie folgt:

<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>Viel Textinhalt ...</p>
      </div>
    </div>
  </div>

Durch die oben genannten Anpassungen kann die Bildlaufleiste auf der mobilen Seite normalerweise nach Abschluss des Scrolls versteckt werden, während der abgerundete Eckstil des äußeren Divs beibehält, wodurch der Verlust des Stils vermieden wird.

Das obige ist der detaillierte Inhalt vonMobiler Überlauf: Auto bewirkt, dass die Bildlaufleiste versteckt ist: Was ist der Grund und wie kann man sie lösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!