webentwicklung-frage-antwort-db.com.de

Browser-Bildlaufleiste ist unter meinem festen div

ich habe einen festen Kopf mit 100% Breite.

#header {
background: #2e2e2e;
width: 100%;
z-index: 999;
position: fixed;
}

browser-Bildlaufleiste ist unter meinem festen div. Wie kann ich das beheben?

scrollbar

39
LifeIsShort

sein, weil der overflow-x: hidden; in base.css Zeilennummer 9 

body {
    color: #444444;
    font: 13px/20px Arial,Helvetica,sans-serif;
    overflow-x: hidden; // remove this 
}
35
NullPoiиteя

Dies kann durch Hinzufügen eines Überlaufs des Körpers gelöst werden

von

overflow:auto;

zu

overflow:auto;
overflow:initial;

Das ist dein Problem

Wenn Ihre Bildlaufleiste auf body gesetzt ist, wenn sie als body> wrapper> header (mit fester Position) strukturiert ist, so der Inhalt usw.

unten ist Ihre Lösung

Lösung für das Problem

note: Dies funktioniert nur für body, aber nicht für div-Container mit Bildlauf. Sie können auch mit z-index arbeiten, um es zum Laufen zu bringen, aber Sie geben z-index an, um andere Elemente zu stapeln, um sie richtig zu machen.

Hoffe das hilft..:)

9
mike tracker

Das Problem ist nicht mit overflow-x am body-Tag. Dies liegt an overflow-x undoverflow-y im Taghtml. Nachdem ich dies aus dem HTML-Tag entfernt hatte, konnte ich den gewünschten Überlauf auf meinen Körper setzen. 

Dies geschieht, wenn:

  • overflow-x ist entweder auf auto, hidden, overflow oder scroll gesetzt.
  • overflow-y ist entweder auf auto, hidden, -webkit-paged-x oder -webkit-paged-y eingestellt.

Es muss kein expliziter Aufruf von overflow-x oder overflow-y sein, da overflow beide einstellt.

Ich bin in Chrome 67 und nutze Windows 10.

3
NonameSL

Ein CSS-Hack (ich habe schließlich einen Weg gefunden), mit nicht viel Erklärung, die schnell gemacht wurde - das erste Floated-Element ist ..__ Ich denke, um das Prinzip zu verstehen, wie es aus dem folgenden Code funktioniert.

Update: Es gibt ein Problem für mobile Browser (siehe unten), um festzustellen, ob Sie damit einverstanden sind oder nicht. 

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 200px;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

Und abschließender Code, fast das gleiche mit Dingen, die Sie sichtbar sehen und funktionieren möchten 

<div style="position: fixed;top: 0;width: 100%;left: 0;z-index: 100000;height: 0px;overflow:visible;background: #f00;">

<div id="aaaaa" style="display: block;float:right;color: #000;overflow-y:scroll;visibility:hidden;min-height:20px;top: -100px;background: #0f0;border: 1px solid #0f0;"></div>
<div id="bbbb" style="display: block;position:relative;color: #000;overflow:hidden;min-height:20px;background: #f0f;border: 1px solid #00f;">sdfasdf sdfas s as as fasd fasd fasdfasd fasd asdf asd fasdf sadf asdf asdf asdf sad fasdf asdf asdf asd fasdf asdf asdf asd fsad sad sfd

        <div style="width: 100%;height: 20px;background: #5ff"></div>

</div>

Wichtig ist, dass es mit mobilen und Desktop-Browsern funktioniert. Momentan habe ich Mobile unter Windows Edge getestet, als mein Computer in den Tablet-Modus und dann in einen Desktop-Modus wechselte. Der Code funktioniert dann die ganze Zeit . Zu prüfen ist, ob dies mit: before anstelle von div id = "aaaa" funktioniert, um mehr css-reines und zusätzliches divs zu erzeugen.

Update: Es funktioniert nicht gut, bevor der Edge-Browser die Bildlaufleiste beim Wechseln in den Tablet-Modus nicht ändert.

Wenn Sie Probleme mit verborgenen Inhalten im bbbb-Element haben, positionieren Sie keine: absolute/fixed-Elemente im bbbb-Container.

Ich habe es noch nicht für alle Situationen und Browser getestet.

Update: das erwähnte Problem irgendwo oben in dieser Antwort - bei mobilen Browsern ist die Bildlaufleiste jedoch verdeckt, da die Bildlaufleiste dynamisch ist - sie wird nur angezeigt, wenn Sie einen Bildlauf durchführen und wissen, dass sie nicht Teil eines Containers ist. Die Bildlaufleiste ist auf allen Browsern wahrscheinlich ziemlich dünn, Sie sollten also entscheiden, was Sie damit tun sollen. Vielleicht etwas 5 Pixel Rand oder so?

2
OpenEX

Ich hatte dieses Problem, meine Bildlaufleiste befand sich unter meiner festen Kopfzeile und löste dieses Problem, nachdem ich mein HTML-Tag height: 100%; entfernt und andere Eigenschaften hinzugefügt hatte, um sicherzustellen, dass ich dasselbe Ergebnis habe. Keine der anderen Lösungen hat mir geholfen. Ich hoffe das hilft jemandem.

1
Madalina Taina

Hatte dasselbe Problem in der App reagieren.

overflow-y: scroll-Stil von #root in body-Auswahl verschoben. Es hat das Problem für mich gelöst.

0
Nikita

Dies kann auf zwei Arten gelöst werden:

1.Zunächst den scrollbarWidth=el.offsetWidth - el.clientWidth

2.Fixiert setzen div left=scrollbarWidth

0
Tony Benjamin