Lassen Sie die Bildlaufleiste keinen Platz einnehmen / verhindern Sie Layoutverschiebungen

Ich mache eine Anwendung mit HTML und brauche eine Bildlaufleiste. Aber immer wenn ich eine hinzufüge, verschiebt es alles, um den nötigen Platz für die Bildlaufleiste zu schaffen. Dies vermasselt das Layout der Anwendung.

Ich brauche also eine Möglichkeit, die Bildlaufleiste einfach über die Seite zu legen, was bedeutet, dass die Seite immer noch dahinter ist. Ich weiß bereits, wie man die Bildlaufleiste gestaltet, um die Rückseite transparent zu machen, ich brauche nur die Bildlaufleiste, um keinen Platz einzunehmen.

Danke im Voraus!

Aktualisieren – overlay war nur Webkit und ist jetzt veraltet.

Du kannst den … benutzen overflow overlay Eigentum statt scroll:

html {
    overflow-y: overlay;
}

Update 2021 – Verwenden scrollbar-gutter

Das scrollbar-gutter Die CSS-Eigenschaft ermöglicht es Autoren, Platz für die Bildlaufleiste zu reservieren, wodurch unerwünschte Layoutänderungen verhindert werden, wenn der Inhalt wächst, und unnötige visuelle Elemente vermieden werden, wenn kein Bildlauf erforderlich ist.

body {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

Beispiel

Demo in Stack Snippets und jsFiddle

body {
  padding: 16px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 273px);
    grid-gap: 16px;
}
.card-header {
  margin-bottom: 4px;
  white-space: pre-line;
  font-weight: bold;
}
.card-body {
  overflow: auto;
  border: 1px solid black;
  height: 120px;
  
}
.scrollbar-stable {
  scrollbar-gutter: stable;
}

<h1><code>scrollbar-gutter</code> sample</h1>

<div class="grid">

  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
    </pre>
    <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
    </pre>
    <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
    </pre>
    <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
    </pre>
    <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
  </div>
  
</div>

Weiterführende Lektüre

• Dokumente
  • Bildlaufleiste-Gutter | MDN
  • Bildlaufleiste-Gutter | Kann ich benutzen
• Artikel
  • Verhindern Sie ungewollte Layout-Verschiebungen durch Scrollbars mit dem Scrollbar-Gutter
  • Erläuterung für die CSS-Eigenschaft „scrollbar-gutter“.
  • Bildlaufleiste-Gutter | CSS-Tricks
• Spezifikationen
  • CSS WG Blog – Protokoll Telecon 2021-08-04
  • CSS-Überlaufmodul Level 3
• Verwandt
  • HTML reserviert Platz für die Bildlaufleiste
  • Verhindert, dass sich die Bildlaufleiste zur Breite der Seite in Chrome addiert
  • Chrome reserviert Platz für die Bildlaufleiste, auch wenn sie ausgeblendet ist
  • CSS 100 % Breite, aber Bildlaufleiste vermeiden
• Alternativedamit die Bildlaufleiste niemals Platz beansprucht, siehe:
  • Bildlaufleiste ausblenden, aber trotzdem scrollen

Es gibt keine Möglichkeit, eine Bildlaufleiste anzuzeigen oben drauf Ihrer Inhalte, ohne zwielichtige Hacks zu verwenden, und es ist ohnehin nicht die beste Idee, da dies die Benutzerfreundlichkeit Ihrer App beeinträchtigt. Wenn sich die Bildlaufleiste über dem Inhalt befindet, werden Links/Text/usw. wahrscheinlich ausgeblendet.

Ihre Seite sollte idealerweise so gestylt sein, dass sie sich an verschiedene Browser-/Seitenbreiten anpasst, ohne zu brechen. Vor allem mit nur einer kleinen Bildlaufleiste.

Wie auch immer, hier ist ein Workaround, der helfen kann:

html {
    overflow-y: scroll;
}

Das Hinzufügen dieses Stils stellt sicher, dass die Spur der Bildlaufleiste immer vorhanden ist, und hilft auch, “springende” Seiten zu vermeiden, wenn eine Bildlaufleiste erscheint/verschwindet. Auch hier besteht die wirkliche Lösung darin, ein flexibles Layout zu verwenden.

Als Randbemerkung wird das Gestalten der Bildlaufleiste im Allgemeinen nicht empfohlen. Es funktioniert nicht browserübergreifend und wird normalerweise vollständig ignoriert.

Sie können dies lösen, indem Sie die Bildlaufleiste ausblenden. Die Lösung finden Sie auf der ws3Schools-Website, https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

<!DOCTYPE html>
<html>
<head>
<style>
.example {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow-y: scroll; /* Add the ability to scroll */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
</style>
</head>
<body>

<h2>Hide scrollbar but keep functionality</h2>
<p>Try to scroll inside the div below:</p>

<div class="example">Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. </div>

</body>
</html>

Wenn Sie keine Angst haben, etwas versteckt zu haben, scheint der folgende Code zu funktionieren.

body {
  width: 100vw;
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  body {
    overflow-x: clip;
  }
}

Der Unterschied zwischen clip und hidden Ist das das clip Schlüsselwort verbietet auch alles Scrollen, einschließlich programmatisches Scrollen. Für Browser nicht unterstützt clipzurücksetzen scrollLeft zu 0 beim Scroll-Event-Callback von document.body wenn benötigt.

Siehe auch, Browserkompatibilität von overflow.

Wenn Sie die Bildlaufleiste die ganze Zeit ausblenden möchten, können Sie diesen Code verwenden. * meine alle

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
*{
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}