Scrollbar -Reflowing

MAC -Entwickler, bitte beachten Sie diesen Tipp: Gehen Sie zu Systemeinstellungen> Allgemein> Scrollbars anzeigen und ändern Sie die Einstellungen, um immer anzuzeigen . Dies ist nichts für Sie persönlich, sondern für die beste Präsentation der Webseite. Denn ohne diese Einstellung werden Sie den von der Bildlaufleiste ausgelösten Layout -Offset nicht erleben, aber es wird von allen anderen Benutzern mit aktivierter Einstellung gestoßen. Um solche Leistungsprobleme zu vermeiden, sollten Sie diese Einstellung selbst verwenden.

Stefan Judis zeigt, dass die Verwendung von Ansichtsfenstereinheiten einer der Gründe für dieses Problem sein kann:

100vw im Code verursacht horizontalen Überlauf, da die vertikale Bildlaufleiste bereits existiert und einen Teil des Raums in Anspruch nehmen. Das fühlt sich sehr unvernünftig an, aber das ist die Wahrheit.

Stefan verweist auf den Artikel von Kilian Valkhof über den Umgang mit dieser Ausgabe. Klassische Lösung:

Die einfache Möglichkeit besteht darin, width: 100% . Der Prozentsatz enthält nicht die Breite der Bildlaufleiste, sodass er sich automatisch anpasst.

Wenn Sie dies nicht tun können oder die Breite eines anderen Elements festlegen, fügen Sie overflow-x: hidden oder overflow: hidden auf dem umgebenden Element, um Scrollbars zu verhindern.

Kilian Valkhof , "Wie man den Grund für horizontale Bildlaufräder finde"

Ich denke, das sind alles HECKEMENT, weil keiner von ihnen Ihre Bedürfnisse voll erfüllt.

Glücklicherweise kommt in Kürze eine spezifikationsbasierte Lösung. Bramus berichtete darüber:

Ein Nebeneffekt beim Anzeigen von Scroll -Balken auf einer Webseite besteht darin, dass sich das Layout des Inhalts je nach Art der Bildlaufleiste ändern kann. scrollbar-gutter -CSS-Eigenschaft (bald in Chromium freigegeben) soll uns Entwicklern mehr Kontrolle darüber geben.

Bramus van Damme , "Verwenden von scrollbar-gutter -CSS-Attribut, um unerwartete Layout-Offsets zu verhindern, die durch Scrollbars verursacht werden"

Dies klingt nach einer Problemumgehung, und ich habe keinen Zweifel daran, dass dies eine sehr häufige Codezeile in Reset -Stylesheets wird:

 Körper {
  Scrollbar-Gutter: stabile Botschaftsschnitte;
}

Dies erinnert mich jedoch an ... wenn ich mit Scrollbar-Problemen auf der gesamten Seitenebene zu tun hatte, ist es scrollbar-gutter Eigenschaft, die funktioniert, oder? Anstelle overflow Überlaufattributs? overflow Überlaufeigenschaft war in der Vergangenheit seltsam, wenn es darum geht, verwandte Aspekte zu scrollen. Können wir es wirklich in allen Browsern implementieren? Wer weiß. Es sieht sehr wahrscheinlich aus, aber ich werde versuchen, es zu verwenden, auch wenn es in der Nähe ist und sich in Übereinstimmung mit der Spezifikation verhält. Es fühlt sich so an, als wäre es für eine progressive Verbesserung geeignet.

Das obige ist der detaillierte Inhalt vonScrollbar -Reflowing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!