it-swarm.com.de

Ausblenden der Bildlaufleiste auf einer HTML-Seite

Kann CSS verwendet werden, um die Bildlaufleiste auszublenden? Wie würdest du das machen?

688
ANP

Setze overflow: hidden; wie folgt auf das Body-Tag:

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

Der obige Code verbirgt sowohl die horizontale als auch die vertikale Bildlaufleiste.

Wenn Sie nur die vertikale Bildlaufleiste ausblenden möchten, verwenden Sie overflow-y:

<style type="text/css">
    body {
        overflow-y: hidden;
    }
</style>

Und wenn Sie nur die horizontale Bildlaufleiste ausblenden möchten, verwenden Sie overflow-x:

<style type="text/css">
    body {
        overflow-x: hidden;
    }
</style>

Hinweis: Die Bildlauffunktion wird ebenfalls deaktiviert. Lesen Sie die folgenden Antworten, wenn Sie nur die Bildlaufleiste, nicht jedoch die Bildlauffunktion ausblenden möchten.

393
jao

WebKit unterstützt Bildlaufleisten-Pseudoelemente, die mit Standard-CSS-Regeln ausgeblendet werden können:

#element::-webkit-scrollbar {
    display: none;
}

Wenn Sie alle Bildlaufleisten ausblenden möchten, verwenden Sie

::-webkit-scrollbar {
    display: none;
}

Ich bin mir nicht sicher, ob ich es wiederherstellen soll - das hat funktioniert, aber es könnte einen richtigen Weg geben:

::-webkit-scrollbar {
    display: block;
}

Sie können natürlich immer width: 0 verwenden, das dann einfach mit width: auto wiederhergestellt werden kann, aber ich bin kein Fan davon, width für Optimierungen der Sichtbarkeit zu missbrauchen.

Firefox 64 unterstützt jetzt standardmäßig das experimentelle scrollbar-width-Eigenschaft (63 erfordert das Setzen eines Konfigurations-Flags). So verbergen Sie die Bildlaufleiste in Firefox 64:

#element {
    scrollbar-width: none;
}

Um zu sehen, ob Ihr aktueller Browser entweder das Pseudoelement oder scrollbar-width unterstützt, versuchen Sie Folgendes:

.content {
  /* These rules create an artificially confined space, so we get
     a scrollbar that we can hide. They are not directly involved in
     hiding the scrollbar. */

  border: 1px dashed gray;
  padding: .5em;

  white-space: pre-wrap;
  height: 5em;
  overflow-y: scroll;
}

.content {
  /* This is the magic bit for Firefox */
  scrollbar-width: none;
}

.content::-webkit-scrollbar {
  /* This is the magic bit for WebKit */
  display: none;
}
<div class='content'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu
urna et leo aliquet malesuada ut ac dolor. Fusce non arcu vel ligula
fermentum sodales a quis sapien. Sed imperdiet justo sit amet venenatis
egestas. Integer vitae tempor enim. In dapibus nisl sit amet purus congue
tincidunt. Morbi tincidunt ut eros in rutrum. Sed quam erat, faucibus
vel tempor et, elementum at tortor. Praesent ac libero at arcu eleifend
mollis ut eget sapien. Duis placerat suscipit eros, eu tempor tellus
facilisis a. Vivamus vulputate enim felis, a euismod diam elementum
non. Duis efficitur ac elit non placerat. Integer porta viverra nunc,
sed semper ipsum. Nam laoreet libero lacus.

Sed sit amet tincidunt felis. Sed imperdiet, nunc ut porta elementum,
eros mi egestas nibh, facilisis rutrum sapien dolor quis justo. Quisque
nec magna erat. Phasellus vehicula porttitor nulla et dictum. Sed
tincidunt scelerisque finibus. Maecenas consequat massa aliquam pretium
volutpat. Duis elementum magna vel velit elementum, ut scelerisque
odio faucibus.
</div>

(Beachten Sie, dass dies keine richtige Antwort auf die Frage ist, da auch die horizontalen Balken ausgeblendet werden. Aber genau danach habe ich gesucht, als Google mich hierhin zeigte. d poste es trotzdem.)

904
Peter

Mehr oder weniger..

Wenn Sie die Frage stellen: "Können die Bildlaufleisten eines Browsers auf irgendeine Weise entfernt werden, anstatt nur ausgeblendet oder getarnt zu werden?", Sagt jeder "Nicht möglich", da das Entfernen von nicht möglich ist die Bildlaufleisten aller Browser in einer kompatiblen und kompatiblen Weise, und dann gibt es das ganze Argument der Benutzerfreundlichkeit.

Es kann jedoch verhindert werden, dass der Browser jemals Bildlaufleisten generieren und anzeigen muss, wenn Sie nicht zulassen, dass Ihre Webseite überläuft.

Dies bedeutet nur, dass wir proaktiv dasselbe Verhalten ersetzen müssen, das der Browser normalerweise für uns tut, und dem Browser danke sagen müssen, aber nein danke Kumpel. Anstatt zu versuchen, Bildlaufleisten zu entfernen (von denen wir alle wissen, dass sie nicht möglich sind), können wir das Scrollen vermeiden (absolut machbar) und innerhalb der von uns erstellten Elemente scrollen und mehr Kontrolle darüber haben.

Erstellen Sie ein Div mit ausgeblendetem Überlauf. Erkennen, wenn der Benutzer versucht, einen Bildlauf durchzuführen, dies jedoch nicht möglich ist, da wir die Funktion des Browsers zum Scrollen mit Überlauf deaktiviert haben: hidden .. und stattdessen den Inhalt mithilfe von JavaScript nach oben verschieben, wenn dies auftritt. Dabei erstellen wir unser eigenes Scrollen ohne das Standard-Scrollen des Browsers oder verwenden ein Plugin wie iScroll .

---

Um gründlich zu sein; Alle herstellerspezifischen Möglichkeiten zur Bearbeitung von Bildlaufleisten:

Internet Explorer 5.5+

* Diese Eigenschaften waren weder Teil der CSS-Spezifikation noch wurden sie genehmigt oder mit einem Präfix versehen, sie funktionieren jedoch in Internet Explorer und Konqueror. Diese können für jede Anwendung auch lokal im Benutzer-Stylesheet festgelegt werden. Im Internet Explorer finden Sie es unter der Registerkarte "Barrierefreiheit", in Konqueror unter der Registerkarte "Stylesheets".

body, html { /* These are defaults and can be replaced by hexadecimal color values */
    scrollbar-base-color: aqua;
    scrollbar-face-color: ThreeDFace;
    scrollbar-highlight-color: ThreeDHighlight;
    scrollbar-3dlight-color: ThreeDLightShadow;
    scrollbar-shadow-color: ThreeDDarkShadow;
    scrollbar-darkshadow-color: ThreeDDarkShadow;
    scrollbar-track-color: Scrollbar;
    scrollbar-arrow-color: ButtonText;
}

Ab Internet Explorer 8 wurden diese Eigenschaften von Microsoft mit einem Herstellerpräfix versehen, sie wurden jedoch noch nie von W3C genehmigt.

-ms-scrollbar-base-color
-ms-scrollbar-face-color
-ms-scrollbar-highlight-color
-ms-scrollbar-3dlight-color
-ms-scrollbar-shadow-color
-ms-scrollbar-darkshadow-color
-ms-scrollbar-base-color
-ms-scrollbar-track-color

Weitere Details zum Internet Explorer

Internet Explorer stellt scroll zur Verfügung, mit dem festgelegt wird, ob Bildlaufleisten deaktiviert oder aktiviert werden sollen. Es kann auch verwendet werden, um den Wert der Position der Bildlaufleisten abzurufen.

Wenn Sie in Microsoft Internet Explorer 6 und höher die !DOCTYPE -Deklaration verwenden, um den standardkonformen Modus anzugeben, gilt dieses Attribut für das HTML-Element. Wenn wie in früheren Versionen von Internet Explorer kein standardkonformer Modus angegeben ist, gilt dieses Attribut für das BODY -Element NOT. das HTML -Element.

Beachten Sie auch, dass bei der Arbeit mit .NET die ScrollBar-Klasse in System.Windows.Controls.Primitives im Presentation Framework für das Rendern der Bildlaufleisten verantwortlich ist.

http://msdn.Microsoft.com/en-us/library/ie/ms534393 (v = vs.85) .aspx


WebKit

WebKit-Erweiterungen im Zusammenhang mit der Anpassung von Bildlaufleisten sind:

::-webkit-scrollbar {}             /* 1 */
::-webkit-scrollbar-button {}      /* 2 */
::-webkit-scrollbar-track {}       /* 3 */
::-webkit-scrollbar-track-piece {} /* 4 */
::-webkit-scrollbar-thumb {}       /* 5 */
::-webkit-scrollbar-corner {}      /* 6 */
::-webkit-resizer {}               /* 7 */

Enter image description here

Diese können jeweils mit zusätzlichen Pseudo-Selektoren kombiniert werden:

  • :horizontal - Die horizontale Pseudoklasse gilt für alle Bildlaufleistenelemente mit horizontaler Ausrichtung.
  • :vertical - Die vertikale Pseudoklasse gilt für alle Bildlaufleistenelemente mit vertikaler Ausrichtung.
  • :decrement - Die dekrementierte Pseudoklasse gilt für Buttons und Trackstücke. Es gibt an, ob die Schaltfläche oder das Trackstück bei Verwendung die Position der Ansicht verringern (z. B. auf einer vertikalen Bildlaufleiste nach oben, auf einer horizontalen Bildlaufleiste nach links).
  • :increment - Die inkrementelle Pseudoklasse gilt für Buttons und Trackstücke. Es gibt an, ob eine Schaltfläche oder ein Track-Element die Position der Ansicht erhöht, wenn es verwendet wird (z. B. auf einer vertikalen Bildlaufleiste nach unten, rechts auf einer horizontalen Bildlaufleiste).
  • :start - Die Start-Pseudoklasse gilt für Buttons und Trackstücke. Es zeigt an, ob sich das Objekt vor dem Daumen befindet.
  • :end - Die End-Pseudoklasse gilt für Buttons und Trackstücke. Es zeigt an, ob das Objekt hinter dem Daumen platziert ist.
  • :double-button - Die Double-Button-Pseudoklasse gilt für Buttons und Trackstücke. Es wird verwendet, um zu erkennen, ob eine Schaltfläche Teil eines Schaltflächenpaars ist, das sich am selben Ende einer Bildlaufleiste befindet. Bei Schienenstücken wird angezeigt, ob das Schienenstück an einem Tastenpaar anliegt.
  • :single-button - Die Single-Button-Pseudoklasse gilt für Buttons und Track-Stücke. Es wird verwendet, um zu erkennen, ob sich eine Schaltfläche am Ende einer Bildlaufleiste befindet. Bei Trackstücken gibt es an, ob das Trackstück an einer Singleton-Schaltfläche anliegt.
  • :no-button - Gilt für Trackstücke und gibt an, ob das Trackstück zum Rand der Bildlaufleiste verläuft oder nicht, d. H. An diesem Ende des Tracks befindet sich keine Schaltfläche.
  • :corner-present - Gilt für alle Bildlaufleistenelemente und gibt an, ob eine Bildlaufleistenecke vorhanden ist.
  • :window-inactive - Gilt für alle Bildlaufleistenelemente und gibt an, ob das Fenster mit der Bildlaufleiste derzeit aktiv ist. (In den letzten Nächten gilt diese Pseudoklasse jetzt auch für :: selection. Wir planen, sie auf alle Inhalte auszudehnen und sie als neue Standard-Pseudoklasse vorzuschlagen.)

Beispiele für diese Kombinationen

::-webkit-scrollbar-track-piece:start { /* Select the top half (or left half) or scrollbar track individually */ }
::-webkit-scrollbar-thumb:window-inactive { /* Select the thumb when the browser window isn't in focus */ }
::-webkit-scrollbar-button:horizontal:decrement:hover { /* Select the down or left scroll button when it's being hovered by the mouse */ }

Weitere Details zu Chrome

addWindowScrollHandler public static HandlerRegistration addWindowScrollHandler (Window.ScrollHandler-Handler)

Fügt einen Window.ScrollEvent-Handler hinzu. Parameter: handler - der Handler Rückgabewert: gibt die Handlerregistrierung zurück. [ source ] ( http://www.gwtproject.org/javadoc/ Aktuell/com/google/gwt/user/client/Window.html # addWindowScrollHandler (com.google.gwt.user.client.Window.ScrollHandler) )


Mozilla

Mozilla verfügt zwar über einige Erweiterungen für die Bearbeitung der Bildlaufleisten, es wird jedoch empfohlen, diese nicht zu verwenden.

  • -moz-scrollbars-none Sie empfehlen die Verwendung eines Überlaufs: stattdessen versteckt.
  • -moz-scrollbars-horizontal Ähnlich wie bei overflow-x
  • -moz-scrollbars-vertical Ähnlich wie bei overflow-y
  • -moz-hidden-unscrollable Funktioniert nur intern in den Einstellungen eines Benutzerprofils. Deaktiviert das Scrollen von XML-Stammelementen und das Scrollen von Webseiten mithilfe der Pfeiltasten und des Mausrads.

  • Mozilla-Entwicklerdokumentation zu 'Overflow'

Weitere Details zu Mozilla

Dies ist meines Wissens nicht wirklich nützlich, aber es ist erwähnenswert, dass das Attribut, das steuert, ob Bildlaufleisten in Firefox angezeigt werden, ( Referenzlink ) ist:

  • Attribut: Bildlaufleisten
  • Geben Sie Folgendes ein: nsIDOMBarProp
  • Beschreibung: Das Objekt, das steuert, ob Bildlaufleisten im Fenster angezeigt werden. Dieses Attribut ist in JavaScript "ersetzbar". Schreibgeschützt

Zu guter Letzt ist Polstern wie Magie.

Wie bereits in einigen anderen Antworten erwähnt, ist hier eine Illustration, die selbsterklärend genug ist.

Enter image description here


Geschichtsunterricht

Scroll bars

Nur weil ich neugierig bin, wollte ich mehr über die Entstehung von Bildlaufleisten erfahren. Dies sind die besten Referenzen, die ich gefunden habe.

Sonstiges

In einem HTML5-Spezifikationsentwurf wurde das seamless -Attribut definiert, um zu verhindern, dass Bildlaufleisten in iFrames angezeigt werden, damit sie mit dem umgebenden Inhalt auf einer Seite gemischt werden können. . Dieses Element wird jedoch in der neuesten Version nicht angezeigt.

Das scrollbar BarProp-Objekt ist ein untergeordnetes Objekt des window -Objekts und stellt das Benutzeroberflächenelement dar, das einen Bildlaufmechanismus oder ein ähnliches Oberflächenkonzept enthält. window.scrollbars.visible gibt true zurück, wenn die Bildlaufleisten sichtbar sind.

interface Window {
  // The current browsing context
  readonly attribute WindowProxy window;
  readonly attribute WindowProxy self;
           attribute DOMString name;
  [PutForwards=href] readonly attribute Location location;
  readonly attribute History history;
  readonly attribute UndoManager undoManager;
  Selection getSelection();
  [Replaceable] readonly attribute BarProp locationbar;
  [Replaceable] readonly attribute BarProp menubar;
  [Replaceable] readonly attribute BarProp personalbar;
  [Replaceable] readonly attribute BarProp scrollbars;
  [Replaceable] readonly attribute BarProp statusbar;
  [Replaceable] readonly attribute BarProp toolbar;
  void close();
  void focus();
  void blur();
  // Truncated

Die Verlaufs-API enthält auch Funktionen für die Bildlaufwiederherstellung bei der Seitennavigation, um die Bildlaufposition beim Laden der Seite beizubehalten.

window.history.scrollRestoration kann verwendet werden, um den Status der Bildlaufwiederherstellung zu überprüfen oder den Status zu ändern (="auto"/"manual" wird angehängt. Der Standardwert lautet "Auto". Wenn Sie den Wert auf "Manuell" ändern, übernehmen Sie als Entwickler die Verantwortung für alle Bildlaufänderungen Dies kann erforderlich sein, wenn ein Benutzer den Verlauf der App durchläuft. Bei Bedarf können Sie die Bildlaufposition verfolgen, während Sie Verlaufseinträge mit history.pushState () übertragen.

---

Weitere Lektüre:

Beispiele

497
davidcondrey

Sie können dies mit einem Wrapper div bewerkstelligen, dessen Überlauf verborgen ist und dessen innerer div auf auto gesetzt ist.

Um die Bildlaufleiste des inneren div zu entfernen, können Sie sie aus dem Ansichtsfenster des äußeren div herausziehen, indem Sie einen negativen Rand auf das innere div anwenden. Wenden Sie dann den gleichen Abstand zum inneren Div an, damit der Inhalt im Blick bleibt.

JSFiddle

HTML

<div class="hide-scroll">
    <div class="viewport">
        ...
    </div>
</div>

CSS

.hide-scroll {
    overflow: hidden;
}

.viewport {
    overflow: auto;

    /* Make sure the inner div is not larger than the container
     * so that we have room to scroll.
     */
    max-height: 100%;

    /* Pick an arbitrary margin/padding that should be bigger
     * than the max width of all the scroll bars across
     * the devices you are targeting.
     * padding = -margin
     */
    margin-right: -100px;
    padding-right: 100px;
}
104
thgaskell

Das funktioniert bei mir mit einfachen CSS-Eigenschaften:

.container {
    -ms-overflow-style: none;  // Internet Explorer 10+
    scrollbar-width: none;  // Firefox
}
.container::-webkit-scrollbar { 
    display: none;  // Safari and Chrome
}

Verwenden Sie für ältere Versionen von Firefox: overflow: -moz-scrollbars-none;

54
Hristo Eftimov

Ich glaube, ich habe eine Problemumgehung für euch gefunden, wenn ihr noch interessiert seid. Dies ist meine erste Woche, aber es hat bei mir funktioniert ...

<div class="contentScroller">
    <div class="content">
    </div>
</div>

.contentScroller {overflow-y: auto; visibility: hidden;}
.content {visibility: visible;}
19
Ben Yo

Wenn Sie nach einer Lösung suchen, um eine Bildlaufleiste für Mobilgeräte auszublenden, folgen Sie Peters Antwort !

Hier ist ein jsfiddle , das die folgende Lösung verwendet, um eine horizontale Bildlaufleiste auszublenden.

.scroll-wrapper{
    overflow-x: scroll;
}
.scroll-wrapper::-webkit-scrollbar { 
    display: none; 
}

Es wurde auf einem Samsung-Tablet mit Android 4.0.4 (Ice Cream Sandwich, sowohl im nativen Browser als auch in Chrome) und auf einem iPad mit iOS 6 (sowohl in Safari als auch in Chrome) getestet.

14
Alex

Hier ist meine Lösung, die theoretisch alle modernen Browser abdeckt:

html {
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

html::-webkit-scrollbar {
    width: 0px; /* For Chrome, Safari, and Opera */
}

html kann durch jedes Element ersetzt werden, dessen Bildlaufleiste ausgeblendet werden soll.

Anmerkung: Ich habe die anderen 19 Antworten überflogen, um zu sehen, ob der Code, den ich poste, bereits abgedeckt wurde, und es scheint, als ob keine einzige Antwort die Situation im Jahr 2019 zusammenfasst, obwohl es eine Menge gibt von ihnen gehen bis ins kleinste Detail. Entschuldigung, wenn dies jemand anderes gesagt hat und ich es verpasst habe.

14
Wilf

Verwenden die Eigenschaft CSS overflow:

.noscroll {
  width: 150px;
  height: 150px;
  overflow: auto; /* Or hidden, or visible */
}

Hier noch einige Beispiele:

10

Verwenden Sie, wie die anderen bereits sagten, CSS overflow.

Wenn der Benutzer dennoch in der Lage sein soll, durch diesen Inhalt zu scrollen (ohne dass die Bildlaufleiste sichtbar ist), muss JavaScript verwendet werden.

Hier meine Antwort für eine Lösung: Bildlaufleiste ausblenden, während weiterhin mit Maus/Tastatur gescrollt werden kann

10
Peter Örneholm

Browserübergreifender Ansatz zum Ausblenden der Bildlaufleiste.

Es wurde auf Edge, Chrome, Firefox und Safari getestet

Bildlaufleiste ausblenden, während Sie noch mit dem Mausrad scrollen können!

Codepen

/* Make parent invisible */
#parent {
    visibility: hidden;
    overflow: scroll;
}

/* Safari and Chrome specific style. Don't need to make parent invisible, because we can style WebKit scrollbars */
#parent:not(*:root) {
  visibility: visible;
}

/* Make Safari and Chrome scrollbar invisible */
#parent::-webkit-scrollbar {
  visibility: hidden;
}

/* Make the child visible */
#child {
    visibility: visible;
}
9
Blake Plumb

Zusätzlich zu Peters Antwort:

#element::-webkit-scrollbar {
    display: none;
}

Dies funktioniert auch für Internet Explorer 10:

 #element {
      -ms-overflow-style: none;
 }
9
JoshW

Wenn Sie möchten, dass der Bildlauf funktioniert, bevor Sie Bildlaufleisten ausblenden, sollten Sie sie mit einem Stil versehen. Moderne Versionen von OS X und mobilen Betriebssystemen verfügen über Bildlaufleisten, die zwar für das Greifen mit der Maus unpraktisch sind, jedoch sehr schön und neutral sind.

Um Bildlaufleisten auszublenden, funktioniert eine Technik von John Kurlak gut, mit der Ausnahme, dass Firefox-Benutzer, die keine Touchpads haben, keine Möglichkeit zum Bildlauf haben, es sei denn, sie haben eine Maus mit einem Rad, was sie wahrscheinlich tun, aber sogar dann können sie normalerweise nur vertikal scrollen.

Johns Technik verwendet drei Elemente:

  • Ein äußeres Element zum Maskieren der Bildlaufleisten.
  • Ein mittleres Element für die Bildlaufleisten.
  • Und ein Inhaltselement, mit dem sowohl die Größe des mittleren Elements als auch Bildlaufleisten festgelegt werden können.

Es muss möglich sein, die Größe der äußeren und inhaltlichen Elemente gleich einzustellen, wodurch die Verwendung von Prozentsätzen entfällt, aber mir fällt nichts anderes ein, das mit der richtigen Optimierung nicht funktioniert.

Meine größte Sorge ist, ob alle Browserversionen Bildlaufleisten festlegen, um übergelaufenen Inhalt sichtbar zu machen. Ich habe in aktuellen Browsern getestet, aber nicht in älteren.

Verzeihen Sie mein SASS ; P

%size {
    // set width and height
}

.outer {
    // mask scrollbars of child
    overflow: hidden;
    // set mask size
    @extend %size;
    // has absolutely positioned child
    position: relative;
}

.middle {
    // always have scrollbars.
    // don't use auto, it leaves vertical scrollbar showing
    overflow: scroll;
    // without absolute, the vertical scrollbar shows
    position: absolute;
}
// prevent text selection from revealing scrollbar, which it only does on
// some webkit based browsers.
.middle::-webkit-scrollbar {
    display: none;
}

.content {
    // Push scrollbars behind mask
    @extend %size;
}

Testen

OS X ist 10.6.8. Windows ist Windows 7.

  • Firefox 32.0 Bildlaufleisten ausgeblendet. Die Pfeiltasten scrollen nicht, obwohl sie zum Fokussieren angeklickt wurden, sondern das Mausrad und zwei Finger auf dem Trackpad. OS X und Windows.
  • Chrome 37.0-Bildlaufleisten ausgeblendet. Die Pfeiltasten funktionieren nach dem Klicken zum Fokussieren. Mausrad und Trackpad funktionieren. OS X und Windows.
  • Internet Explorer 11-Bildlaufleisten ausgeblendet. Die Pfeiltasten funktionieren nach dem Klicken zum Fokussieren. Mausrad funktioniert. Windows.
  • Safari 5.1.10 Bildlaufleisten ausgeblendet. Die Pfeiltasten funktionieren nach dem Klicken zum Fokussieren. Mausrad und Trackpad funktionieren. OS X.
  • Android 4.4.4 und 4.1.2. Bildlaufleisten ausgeblendet. Touch-Scrolling funktioniert. Versucht in Chrome 37.0, Firefox 32.0 und HTMLViewer auf 4.4.4 (was auch immer das ist). In HTMLViewer hat die Seite die Größe des maskierten Inhalts und kann auch gescrollt werden! Das Scrollen interagiert akzeptabel mit dem Zoomen von Seiten.
6
Seth W. Klein

Ich dachte nur, ich würde jedem anderen, der diese Frage liest, darauf hinweisen, dass die Einstellung von overflow: hidden (oder overflow-y) für das body -Element die Bildlaufleisten für mich nicht ausgeblendet hat.

Ich musste das html -Element verwenden.

5
Brad Azevedo

Ich habe eine WebKit-Version mit einigen Optionen geschrieben, wie Automatisch ausblenden , Kleine Version , scrolle nur-y oder nur-x :

._scrollable{
    @size: 15px;
    @little_version_ratio: 2;
    @scrollbar-bg-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color: rgba(0,0,0,0.15);
    @scrollbar-handler-color-hover: rgba(0,0,0,0.3);
    @scrollbar-coner-color: rgba(0,0,0,0);

    overflow-y: scroll;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;

    &::-webkit-scrollbar {
        background: none;
        width: @size;
        height: @size;
    }

    &::-webkit-scrollbar-track {
        background-color:@scrollbar-bg-color;
        border-radius: @size;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: @size;
        background-color:@scrollbar-handler-color;
        &:hover{
            background-color:@scrollbar-handler-color-hover;
        }
    }

    &::-webkit-scrollbar-corner {
      background-color: @scrollbar-coner-color;
    }

    &.little{
        &::-webkit-scrollbar {
            background: none;
            width: @size / @little_version_ratio;
            height: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-track {
            border-radius: @size / @little_version_ratio;
        }
        &::-webkit-scrollbar-thumb {
            border-radius: @size / @little_version_ratio;
        }
    }

    &.autoHideScrollbar{
        overflow-x: hidden;
        overflow-y: hidden;
        &:hover{
            overflow-y: scroll;
            overflow-x: scroll;
            -webkit-overflow-scrolling: touch;
            &.only-y{
                overflow-y: scroll !important;
                overflow-x: hidden !important;
            }

            &.only-x{
                overflow-x: scroll !important;
                overflow-y: hidden !important;
            }
        }
    }

    &.only-y:not(.autoHideScrollbar){
        overflow-y: scroll !important;
        overflow-x: hidden !important;
    }

    &.only-x:not(.autoHideScrollbar){
        overflow-x: scroll !important;
        overflow-y: hidden !important;
    }
}

http://codepen.io/hicTech/pen/KmKrjb

4
Marco Allori

Mein HTML sieht so aus:

<div class="container">
  <div class="content">
  </div>
</div>

Fügen Sie dies zu Ihrem div hinzu, in dem Sie die Bildlaufleiste ausblenden möchten:

.content {
  position: absolute;
  right: -100px;
  overflow-y: auto;
  overflow-x: hidden;
  height: 75%; /* This can be any value of your choice */
}

Und dies in den Behälter geben

.container {
  overflow-x: hidden;
  max-height: 100%;
  max-width: 100%;
}
3
Timo

Kopieren Sie diesen CSS-Code in den Kundencode, um die Bildlaufleiste auszublenden:

<style>

    ::-webkit-scrollbar {
       display: none;
    }

    #element::-webkit-scrollbar {
       display: none;
    }

</style>
2

Um die vertikale Bildlaufleiste zu deaktivieren, fügen Sie einfach overflow-y:hidden; hinzu.

Mehr dazu: Überlauf .

2
Pranay Rana

Meine Antwort scrollt auch bei overflow:hidden; mit jQuery:

Scrollen Sie zum Beispiel horizontal mit dem Mausrad:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>
<script type="text/javascript">
    $(function() {

       $("YourSelector").mousewheel(function(event, delta) {

          this.scrollLeft -= (delta * 30);
          event.preventDefault();
       });
    });
</script>
2

Ich glaube, Sie können es mit dem overflow CSS-Attribut manipulieren, aber sie haben eingeschränkte Browser-Unterstützung. Eine Quelle gab an, es handele sich um Internet Explorer 5 (und höher), Firefox 1.5 (und höher) und Safari 3 (und höher) - vielleicht genug für Ihre Zwecke.

Scrollen, Scrollen, Scrollen hat eine gute Diskussion.

1
Stefan Mohr