Ich möchte in der Lage sein, durch die ganze Seite zu scrollen, ohne dass die Bildlaufleiste angezeigt wird.
In Google Chrome ist es:
::-webkit-scrollbar {
display: none;
}
Aber Mozilla Firefox und Internet Explorer scheinen nicht so zu funktionieren.
Ich habe dies auch in CSS versucht:
overflow: hidden;
Das verbirgt zwar die Bildlaufleiste, aber ich kann nicht mehr scrollen.
Gibt es eine Möglichkeit, die Bildlaufleiste zu entfernen, während ich weiterhin die gesamte Seite scrollen kann?
Bitte nur mit CSS oder HTML.
quelle
!important
also habe ich sie alle entfernt: jsfiddle.net/5GCsJ/954box-sizing: border-box; width: calc(100% + 50px);
und den gleichen Wert für die Polsterung. Kein Browser hat eine Breite / Höhe der Bildlaufleiste von 50 Pixel, daher sollte er einfach alle abdecken ...Mit WebKit ist dies mit optionalem Design ganz einfach:
quelle
cordova
App, funktionierte gut. mussteoverflow:scroll
auf element anwenden .-webkit-overflow-scrolling: touch
Dies funktioniert bei mir mit einfachen CSS-Eigenschaften:
Verwenden Sie für ältere Versionen von Firefox:
overflow: -moz-scrollbars-none;
quelle
overflow: -moz-scrollbars-none
Versteckt für mich die Bildlaufleisten in Firebox, deaktiviert aber auch das Scrollen. Können Sie eine Demo bereitstellen, in der dies für Sie funktioniert?-moz-scrollbars-none
Eigenschaft für die neuesten Firefox-Versionen gelöscht: developer.mozilla.org/en-US/docs/Web/CSS/overflow-webkit-overflow-scrolling: touch
-moz-scrollbars-none
Sie verwenden@-moz-document url-prefix() { .container { overflow: hidden; } }
. Siehe stackoverflow.com/questions/952861/… .AKTUALISIEREN:
Firefox unterstützt jetzt das Ausblenden von Bildlaufleisten mit CSS, sodass jetzt alle gängigen Browser abgedeckt sind (Chrome, Firefox, Internet Explorer, Safari usw.).
Wenden Sie einfach das folgende CSS auf das Element an, aus dem Sie Bildlaufleisten entfernen möchten:
Dies ist die am wenigsten hackige Cross-Browser-Lösung, die mir derzeit bekannt ist. Schauen Sie sich die Demo an.
URSPRÜNGLICHE ANTWORT:
Hier ist ein anderer Weg, der noch nicht erwähnt wurde. Es ist wirklich einfach und beinhaltet nur zwei Divs und CSS. Es wird kein JavaScript oder proprietäres CSS benötigt und es funktioniert in allen Browsern. Es ist auch nicht erforderlich, die Breite des Behälters explizit einzustellen, um ihn flüssig zu machen.
Bei dieser Methode wird ein negativer Rand verwendet, um die Bildlaufleiste aus dem übergeordneten Bereich zu verschieben, und anschließend derselbe Abstand, um den Inhalt an seine ursprüngliche Position zurückzuschieben. Die Technik funktioniert für vertikales, horizontales und bidirektionales Scrollen.
Demos:
Beispielcode für die vertikale Version:
HTML:
CSS:
quelle
Verwenden:
Dies ist ein Trick, um die Bildlaufleiste etwas mit einem überlappenden Div zu überlappen, das keine Bildlaufleisten enthält:
Dies gilt nur für WebKit- Browser ... Oder Sie können browserspezifische CSS-Inhalte verwenden (falls es in Zukunft welche gibt). Jeder Browser kann eine andere und spezifische Eigenschaft für die jeweiligen Balken haben.
Für Microsoft Edge - Einsatz:
-ms-overflow-style: -ms-autohiding-scrollbar;
oder-ms-overflow-style: none;
als pro MSDN .Es gibt kein Äquivalent für Firefox. Obwohl es ein jQuery-Plugin gibt, um dies zu erreichen, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
quelle
::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; }
// jQuery Mobile onMobileInit ()$.mobile.touchOverflowEnabled = true;
Diese Antwort enthält keinen Code. Hier ist die Lösung von Seite :
Laut der Seite dieses Ansatz muss nicht die Breite des Scrollbar vor der Zeit zu arbeiten , um zu wissen , und die Lösung funktioniert für alle Browser zu, und zu sehen ist hier .
Das Gute ist, dass Sie nicht gezwungen sind, Polster oder Breitenunterschiede zu verwenden, um die Bildlaufleiste auszublenden.
Dies ist auch zoomfest. Padding / Width-Lösungen zeigen die Bildlaufleiste an, wenn sie auf das Minimum gezoomt werden.
Firefox-Fix: http://jsbin.com/mugiqoveko/1/edit?output
quelle
::-webkit-scrollbar {}
padding-right: 150px;
behebt. Getestet in FF, Chrome, Safari und Edge. Funktioniert auch bei niedrigen Zoomstufen aufgrund der großen rechten Polsterung.html { -ms-overflow-style: none;}
. In diesen Browsern muss kein Padding-Hack verwendet werden.overflow-y: scroll
um ein Bildlaufverhalten zu erhalten, aber versteckt (genau wie Chrome), damit es auf Edge23 funktioniert.Verwenden Sie einfach die folgenden drei Zeilen und Ihr Problem wird gelöst:
Wo Liaddshapes ist der Name des Div, wo die Schriftrolle kommt.
quelle
Dies funktioniert bei mir browserübergreifend. Dies verbirgt jedoch keine nativen Bildlaufleisten in mobilen Browsern.
In SCSS
In CSS
quelle
{}
)? Wie ist es zu interpretieren? Und das&
? Vielleicht in Ihrer Antwort näher erläutern?&::-webkit-scrollbar
wird.hide-native-scrollbar::-webkit-scrollbar { }
in CSS{ width: 0; height: 0;}
für :: - Webkit-Bildlaufleiste anstattdisplay: none
für iOS.Folgendes hat für mich unter Microsoft, Chrome und Mozilla für ein bestimmtes div-Element funktioniert:
quelle
scrollbar-width
(nur FF) als "experimentell" gekennzeichnet istHTML:
CSS:
Wenden Sie CSS entsprechend an.
Überprüfen Sie es hier (getestet in Internet Explorer und Firefox).
quelle
Ab dem 11. Dezember 2018 (Firefox 64 und höher) ist die Antwort auf diese Frage in der Tat sehr einfach, da Firefox 64+ jetzt die CSS Scrollbar Styling-Spezifikation implementiert .
Verwenden Sie einfach das folgende CSS:
Link zum Versionshinweis zu Firefox 64 hier .
quelle
Verwenden:
CSS
HTML
quelle
Verwenden
Rufen Sie diese Funktionen für jeden Punkt auf, an dem Sie die Bildlaufleisten laden oder entladen oder neu laden möchten. Es ist in Chrome immer noch scrollbar, da ich es in Chrome getestet habe, aber ich bin mir der anderen Browser nicht sicher.
quelle
Das funktioniert bei mir:
quelle
In modernen Browsern können Sie Folgendes verwenden
wheel event
:quelle
overflow: hidden
diesen Code verwendet, damitmat-card-content
(in Winkel 5 natürlich) scrollbar ist und diese mein Problem gelöst haben. Hinweis: Ich habe ese.deltaY
als mein verwendetstep
und es hat wie normales Scrollen funktioniert, daher denke ich, dass es für normales Scrollen die beste Übereinstimmung ist, wenn die Bildlaufleiste ausgeblendet ist.Mein Problem: Ich möchte keinen Stil in meinem HTML-Inhalt. Ich möchte, dass mein Körper ohne Bildlaufleiste direkt scrollbar ist und nur ein vertikaler Bildlauf, der mit CSS-Gittern funktioniert für jede Bildschirmgröße .
Die Box-Sizing- Value-Impact-Padding- oder Margin-Lösungen funktionieren mit Box-Sizing: Content-Box .
Ich brauche immer noch die Direktive "-moz-scrollbars-none" und wie gdoron und Mr_Green musste ich die Bildlaufleiste ausblenden. Ich habe es versucht
-moz-transform
und-moz-padding-start
, um Auswirkungen nur Firefox, aber es war ansprechbar Nebenwirkungen , die zu viel Arbeit nötig.Diese Lösung funktioniert für HTML-Textinhalte im Stil "display: grid" und reagiert.
quelle
Das Hinzufügen von Polstern zu einem Inneren
div
, wie in der aktuell akzeptierten Antwort, funktioniert nicht, wenn Sie es aus irgendeinem Grund verwenden möchtenbox-model: border-box
.In beiden Fällen erhöht sich die Breite des inneren
div
Bereichs auf 100% zuzüglich der Breite der Bildlaufleiste (vorausgesetzt,overflow: hidden
der äußere Teil wird verwendet).Zum Beispiel in CSS:
Browserübergreifend in JavaScript:
quelle
So mache ich es für horizontales Scrollen; Nur CSS und funktioniert gut mit Frameworks wie Bootstrap / col- *. Es werden nur zwei zusätzliche
div
s und der Elternteil mit einemwidth
oder einemmax-width
Satz benötigt:Sie können den Text zum Scrollen auswählen oder mit den Fingern scrollen, wenn Sie einen Touchscreen haben.
Kurzfassung für Faule:
quelle
margin-bottom
,padding-bottom
aber mit dem gleichen Wert. Dies wird nicht unter dem Platz für das Element unten verschlingen. Es verhindert Überlappungen.margin-bottom
ist negativ, ich denke, es kann nicht in ein geändert werdenpadding-bottom
, das keine negativen Werte verarbeiten kannDas folgende SASS- Design sollte Ihre Bildlaufleiste in den meisten Browsern transparent machen (Firefox wird nicht unterstützt):
quelle
Ich habe zufällig die oben genannten Lösungen in meinem Projekt ausprobiert und aus irgendeinem Grund konnte ich die Bildlaufleiste aufgrund der Div-Positionierung nicht ausblenden. Daher habe ich beschlossen, die Bildlaufleiste auszublenden, indem ich ein Div einführte, das sie oberflächlich abdeckt. Das folgende Beispiel zeigt eine horizontale Bildlaufleiste:
Das entsprechende CSS lautet wie folgt:
quelle
Dies wird am Körper sein:
Und das ist das CSS:
quelle
Dies ist eine Divitis-ähnliche Lösung, die dennoch für alle Browser funktionieren sollte ...
Das Markup lautet wie folgt und muss sich in einem Objekt mit relativer Position befinden (und seine Breite sollte festgelegt werden, z. B. 400 Pixel):
Das CSS:
quelle
Das
perfect-scrollbar
Plugin scheint der richtige Weg zu sein, siehe: https://github.com/noraesae/perfect-scrollbarEs ist eine gut dokumentierte und vollständige JavaScript-basierte Lösung für das Problem mit den Bildlaufleisten.
Demoseite: http://noraesae.github.io/perfect-scrollbar/
quelle
Eine andere Art von hackigem Ansatz besteht darin,
overflow-y: hidden
das Element manuell zu scrollen und dann folgendermaßen zu scrollen:onmousewheel
In deepmikotos Blog gibt es einen großartigen Artikel darüber, wie man Ereignisse erkennt und damit umgeht . Dies mag für Sie funktionieren, ist aber definitiv keine elegante Lösung.quelle
Ich wollte nur ein kombiniertes Snippet freigeben, um die Bildlaufleiste auszublenden, die ich beim Entwickeln verwende. Es ist eine Sammlung mehrerer im Internet gefundener Schnipsel, die für mich funktioniert:
quelle
Sie können den folgenden Code verwenden, um die Bildlaufleiste auszublenden, während Sie dennoch scrollen können:
quelle
Verwenden Sie zum Ausblenden von Bildlaufleisten für Elemente mit überfülltem Inhalt.
quelle
Eine weitere einfache Arbeitsgeige :
Überlauf im übergeordneten Container ausgeblendet und Überlauf automatisch im untergeordneten Container. Einfach.
quelle
Diese knifflige Lösung funktioniert auch mit alten IE-Webbrowsern
Es ist eine Problemumgehung für die [ vertikale Bildlaufleiste ]
Probieren Sie es einfach aus : jsfiddle
quelle
Stellen Sie einfach die Breite der Breite des Kindes auf 100% ein und füllen Sie sie auf 15 Pixel auf, um
overflow-x
zu scrollen undoverflow:hidden
für das Elternteil und die gewünschte Breite.Es funktioniert perfekt mit allen gängigen Browsern, einschließlich Internet Explorer und Edge, mit Ausnahme von Internet Explorer 8 und niedriger.
quelle