Ein Fehler wurde behoben, der dadurch verursacht wurde, dass die Bildlaufleiste Platz einnahm

Hintergrund

Dieser Fehler wurde dadurch verursacht, dass滾動條占據空間. Ich habe einige Informationen überprüft und das Problem schließlich gelöst. Übrigens habe ich diese Eigenschaft untersucht, eine Zusammenfassung erstellt und sie mit Ihnen geteilt.

Text

Gestern hat ein Tester ein Problem gemeldet. Das Problem bestand darin, dass聚焦提示偏了. Lassen Sie mich das Problem wie unten gezeigt beheben:

Ich dachte zuerst, das rote Kästchen sei an der falschen Stelle und suchte nach dem Code:

<Eingabe
  // ...
  onFocus={() => setFocusedInputName('Richtpreis')}
  beiUnschärfe={() => setFocusedInputName('')}
/>

<Tabelle
  Datenfokussierte Spalte = {focusedInputName}
  // ...
/>

Mit dem Code ist alles in Ordnung, er wurde nicht manuell festgelegt und funktioniert auf meinem PC, dem eines anderen Kollegen und dem des Premierministers einwandfrei:

Die erste Einschätzung ist, dass es einen Unterschied bei der Positionsbestimmung des roten Kästchens gibt, der Unterschied beträgt etwa 17 Pixel, aber wie ist dieser Unterschied zustande gekommen?

Ich ging zum PC des Testers und bemerkte ein Detail. Auf meinem PC war die Bildlaufleiste aufgehängt:

Auf seinem PC nimmt die Bildlaufleiste Platz ein:

Er änderte auf seinem Computer das ursprüngliche overscroll-y: scroll manuell overscroll-y: overlay das Problem war gelöst.

Daher wird davon ausgegangen, dass der Fehler dadurch verursacht wird, dass滾動條占據空間.

overscroll-y: Überlagerung

Die CSS-Eigenschaft „Overflow“ definiert, was zu tun ist, wenn der Inhalt eines Elements zu groß ist, um in einen Blockformatierungskontext zu passen. Es ist eine Abkürzungseigenschaft für overflow-x und overflow-y.

/* Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert*/
Überlauf: sichtbar;

/* Der Inhalt wird abgeschnitten und der Rest des Inhalts ist nicht sichtbar */
Überlauf: versteckt;

/* Der Inhalt wird gekürzt und der Browser zeigt eine Bildlaufleiste an, um den verbleibenden Inhalt anzuzeigen */
Überlauf: scrollen;

/* Wird vom Browser bestimmt, wird eine Bildlaufleiste angezeigt, wenn der Inhalt abgeschnitten wird */
Überlauf: automatisch;

/* Gibt an, dass der Überlaufattributwert vom übergeordneten Element übernommen wird*/
Überlauf: erben;

Offizielle Beschreibung:

overlay verhält sich genauso wie auto , aber die Bildlaufleisten werden über dem Inhalt gezeichnet, anstatt Platz zu beanspruchen. Wird nur in WebKit-basierten (z. B. Safari ) und Blink-basierten (z. B. Chrome oder Opera ) Browsern unterstützt.

Leistung:

html {
  Überlauf-y: Überlagerung;
}

Kompatibilität

Ich habe auf caniuse keine Kompatibilität für diese Eigenschaft gefunden und jemand hat auch diese Frage gestellt:

Problemszenarien und Lösungen

1. Scrollbar des äußeren Containers

Mit dem externen Container ist hier HTML gemeint, das direkt der äußersten Ebene hinzugefügt wird:

html {
  Überlauf-y: scrollen;
}

Wenn Sie diese Funktion manuell hinzufügen, wird immer Platz in der Bildlaufbreite belegt.

Nachteile: Es gibt eine Bildlaufleiste, auch wenn nicht gescrollt wird, was nicht sehr schön ist.

Vorteile: Praktisch, keine Kompatibilitätsprobleme.

2. Methode zur absoluten Positionierung externer Container

Durch die absolute Positionierung wird sichergestellt, dass die Breite des Textkörpers immer den vollen Platz einhält:

html {
  overflow-y: scroll; // kompatibel mit IE8, unterstützt nicht: root, vw
}

:Wurzel {
  Überlauf-y: automatisch;
  Überlauf-x: versteckt;
}

:Wurzelkörper {
  Position: absolut;
}

Körper {
  Breite: 100vw;
  Überlauf: versteckt;
}

3. Interne Containerkompatibilität

.wrapper {
    Überlauf-y: scrollen; // Fallback
    Überlauf-y: Überlagerung;
}

Zusammenfassen

Meine persönliche Empfehlung ist, overlay zu verwenden und dann als Backup Scroll zu nutzen.

Das ist der gesamte Inhalt. Ich hoffe, er kann Sie inspirieren.

Sollten im Artikel Fehler vorhanden sein, weisen Sie bitte im Kommentarbereich darauf hin, danke.

Verweise

https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow

https://github.com/Fyrd/caniuse/issues/4027

Dies ist das Ende dieses Artikels über die Behebung eines Fehlers, der durch die Platz beanspruchende Bildlaufleiste verursacht wurde. Weitere Informationen zu Fehlern, die durch die Platz beanspruchende Bildlaufleiste verursacht wurden, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!