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

Stellen Sie overflow: hidden;das Body-Tag wie folgt ein:

<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>

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

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

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

WebKit unterstützt Pseudoelemente in der Bildlaufleiste, 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 verwenden width: 0, was dann leicht wiederhergestellt werden kann width: auto, aber ich bin kein Fan von Missbrauch widthfür Sichtbarkeitsverbesserungen.

Firefox 64 unterstützt jetzt standardmäßig die experimentelle Eigenschaft für die Breite der Bildlaufleiste (63 erfordert das Setzen eines Konfigurationsflags). So blenden Sie die Bildlaufleiste in Firefox 64 aus:

#element {
    scrollbar-width: none;
}

scrollbar-widthProbieren Sie dieses Snippet aus, um festzustellen, ob Ihr aktueller Browser entweder das Pseudoelement oder unterstützt :

.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 hier auch die horizontalen Balken ausgeblendet werden. Aber genau danach habe ich gesucht, als Google mich hierher zeigte, und ich dachte, ich würde es trotzdem posten.)

Mehr oder weniger..

Wenn Sie die Frage stellen: "Können die Bildlaufleisten eines Browsers auf irgendeine Weise entfernt werden, anstatt einfach ausgeblendet oder getarnt zu werden?", Sagen alle "Nicht möglich", da es nicht möglich ist , die Bildlaufleisten aus allen Browsern in einem Browser zu entfernen konform und kompatibel, und dann gibt es das ganze Argument der Benutzerfreundlichkeit.

Es ist jedoch möglich zu verhindern, dass der Browser jemals Bildlaufleisten generieren und anzeigen muss, wenn Sie nicht zulassen, dass Ihre Webseite überläuft.

Dies bedeutet nur, dass wir proaktiv das gleiche Verhalten ersetzen müssen, das der Browser normalerweise für uns tun würde, 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 (durchaus machbar) und innerhalb der Elemente scrollen, die wir erstellen und über die wir mehr Kontrolle haben.

Erstellen Sie ein Div mit ausgeblendetem Überlauf. Erkennen Sie, wenn der Benutzer versucht, einen Bildlauf durchzuführen, dies jedoch nicht möglich ist, da wir die Browserfunktion zum Überlaufen mit Überlauf deaktiviert haben: hidden .. und verschieben Sie den Inhalt stattdessen mithilfe von JavaScript nach oben, wenn dies auftritt. Erstellen Sie dabei unser eigenes Scrollen, ohne dass der Browser standardmäßig scrollt, oder verwenden Sie 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 jemals genehmigt oder dem Hersteller vorangestellt, aber sie funktionieren in Internet Explorer und Konqueror. Diese können auch lokal im Benutzer-Stylesheet für jede Anwendung festgelegt werden. In Internet Explorer finden Sie es auf der Registerkarte "Eingabehilfen", in Konqueror auf 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 wurde diesen Eigenschaften von Microsoft ein Herstellerpräfix vorangestellt, sie wurden jedoch von W3C noch nie 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 zu Internet Explorer

Internet Explorer macht scroll 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 !DOCTYPEDeklaration 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 BODYElement, NICHT für das HTMLElement.

Es ist auch erwähnenswert, dass bei der Arbeit mit .NET die ScrollBar-Klasse im System.Windows.Controls.PrimitivesPresentation Framework für das Rendern der Bildlaufleisten verantwortlich ist.

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

• MSDN. Grundlegende Eigenschaften der Benutzeroberfläche
• W3C. Informationen zu nicht standardmäßigen Eigenschaften der Bildlaufleiste
• MSDN. .NET ScrollBar-Klasse

WebKit

WebKit-Erweiterungen im Zusammenhang mit der Anpassung der Bildlaufleiste 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 */

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 Dekrement-Pseudoklasse gilt für Schaltflächen und Spurstücke. Es zeigt an, ob die Schaltfläche oder das Spurstück die Position der Ansicht bei Verwendung verringert (z. B. oben auf einer vertikalen Bildlaufleiste, links auf einer horizontalen Bildlaufleiste).
• :increment- Die Inkrement-Pseudoklasse gilt für Schaltflächen und Spurstücke. Es zeigt an, ob eine Schaltfläche oder ein Trackstück die Position der Ansicht erhöht, wenn sie verwendet wird (z. B. unten auf einer vertikalen Bildlaufleiste, rechts auf einer horizontalen Bildlaufleiste).
• :start- Die Start-Pseudoklasse gilt für Buttons und Trackstücke. Es zeigt an, ob das Objekt vor dem Daumen platziert ist.
• :end- Die Endpseudoklasse gilt für Buttons und Trackstücke. Es zeigt an, ob das Objekt hinter dem Daumen platziert ist.
• :double-button- Die Doppelknopf-Pseudoklasse gilt für Knöpfe und Spurstü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 Spurstücken gibt es an, ob das Spurstück an zwei Tasten anliegt.
• :single-button- Die Pseudoklasse mit einem Knopf gilt für Knöpfe und Spurstücke. Es wird verwendet, um zu erkennen, ob sich eine Schaltfläche am Ende einer Bildlaufleiste befindet. Bei Trackstücken wird angezeigt, ob das Trackstück an eine Singleton-Schaltfläche angrenzt.
• :no-button - Gilt für Spurstücke und gibt an, ob das Spurstück bis zum Rand der Bildlaufleiste verläuft oder nicht, dh an diesem Ende der Spur befindet sich keine Schaltfläche.
• :corner-present - Gilt für alle Bildlaufleistenelemente und gibt an, ob eine Bildlaufleistenecke vorhanden ist oder nicht.
• :window-inactive- Gilt für alle Bildlaufleistenelemente und gibt an, ob das Fenster mit der Bildlaufleiste derzeit aktiv ist. (In den letzten Nachtzeitungen gilt diese Pseudoklasse jetzt auch für die :: Auswahl. 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 */ }

• Styling-Bildlaufleisten - Webkit.org

Weitere Details zu Chrome

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

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

Mozilla

Mozilla verfügt zwar über einige Erweiterungen zum Bearbeiten der Bildlaufleisten, es wird jedoch empfohlen, diese nicht zu verwenden.

• -moz-scrollbars-none Sie empfehlen die Verwendung von Überlauf: stattdessen versteckt.
• -moz-scrollbars-horizontal Ähnlich wie bei Überlauf-x
• -moz-scrollbars-vertical Ähnlich wie bei Überlauf

• -moz-hidden-unscrollableFunktioniert nur intern innerhalb der Benutzerprofileinstellungen. Deaktiviert das Scrollen von XML-Stammelementen und deaktiviert das Scrollen von Webseiten mithilfe der Pfeiltasten und des Mausrads.

• Mozilla Developer Docs zum Thema "Überlauf"

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 oder nicht, ( Referenzlink ) lautet :

• 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

Last but not least ist Polsterung wie Magie.

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

Geschichtsunterricht

Nur weil ich neugierig bin, wollte ich etwas über die Herkunft von Bildlaufleisten erfahren, und dies sind die besten Referenzen, die ich gefunden habe.

• 10 Erfindungen zum Scrollen und zu Bildlaufleisten
• https://tools.ietf.org/id/draft-hellstrom-textpreview-02.txt
• https://tools.ietf.org/id/draft-mrose-blocks-service-01.txt

Sonstiges

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

Das scrollbarBarProp-Objekt ist ein untergeordnetes Objekt des windowObjekts und stellt das Benutzeroberflächenelement dar, das einen Bildlaufmechanismus oder ein ähnliches Schnittstellenkonzept enthält. window.scrollbars.visiblewird zurückgegeben, truewenn 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 zur Wiederherstellung des Bildlaufs 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 ihren Status zu ändern (Anhängen ="auto"/"manual" . Auto ist der Standardwert. Wenn Sie ihn auf manuell , übernehmen Sie als Entwickler das Eigentum an allen Bildlaufänderungen, die möglicherweise erforderlich sind, wenn ein Benutzer den Verlauf der App durchläuft Wenn nötig, können Sie die Bildlaufposition verfolgen, während Sie Verlaufseinträge mit history.pushState () verschieben.

--- ---.

Weiterführende Literatur:

• Bildlaufleiste auf Wikipedia
• Bildlaufleiste (Windows)
• Die Bildlaufmethode
• Die Bildlaufmethode - Microsoft Dev Network
• iScroll on Github (siehe erster Abschnitt oben)
• Scrolling und Scrollbars ein Artikel über Usability von Jakob Nielsen

Beispiele

• Unabhängige Bildlauffelder ohne Bildlauf (nur mit CSS) - Ben Frain (21.10.2014)

Sie können dies mit einem Wrapper erreichen div, dessen Überlauf ausgeblendet und dessen innerer divSatz auf eingestellt ist auto.

Um die divBildlaufleiste des Inneren zu entfernen , können Sie sie aus dem divAnsichtsfenster des Äußeren herausziehen, indem Sie einen negativen Rand auf das Innere anwenden div. Wenden Sie dann die gleiche Auffüllung auf das innere 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;
}

Dies 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;

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.

_{Hinweis : Ich habe die anderen 19 Antworten überflogen, um festzustellen, ob der von mir veröffentlichte Code bereits behandelt wurde, und es scheint, als würde keine einzige Antwort die Situation im Jahr 2019 zusammenfassen, obwohl viele von ihnen sehr detailliert sind. Entschuldigung, wenn dies von jemand anderem gesagt wurde und ich es verpasst habe.}

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;}

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

Hier ist eine jsfiddle , die 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.

Verwenden Sie die CSS- overflowEigenschaft :

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

Hier sind einige weitere Beispiele:

• Überlauf-x, Überlauf-y-Tests
• Die CSS-Überlaufeigenschaft

Verwenden Sie, wie die anderen bereits gesagt haben, CSS overflow.

Wenn Sie jedoch weiterhin möchten, dass der Benutzer diesen Inhalt scrollen kann (ohne dass die Bildlaufleiste sichtbar ist), müssen Sie JavaScript verwenden.

Siehe meine Antwort hier für eine Lösung: Bildlaufleiste ausblenden, während Sie noch mit Maus / Tastatur scrollen können

Zusätzlich zu Peters Antwort:

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

Dies funktioniert für Internet Explorer 10 genauso:

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

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;
}

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

Bildlaufleisten ausblenden, eine Technik von John Kurlak funktioniert gut, außer dass Firefox-Benutzer, die keine Touchpads haben, keine Möglichkeit zum haben, es sei denn, sie haben eine Maus mit einem Rad, was sie wahrscheinlich tun, aber selbst 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 der Inhaltselemente gleich einzustellen, wodurch die Verwendung von Prozentsätzen entfällt, aber ich kann mir nichts anderes vorstellen, das mit der richtigen Optimierung nicht funktioniert.

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

Verzeihen Sie meinen 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 auch nach dem Klicken nicht, um zu fokussieren, aber das Mausrad und zwei Finger auf dem Trackpad tun dies. OS X und Windows.
• Chrome 37.0 Bildlaufleisten ausgeblendet. Die Pfeiltasten funktionieren nach dem Klicken, um zu fokussieren. Mausrad und Trackpad funktionieren. OS X und Windows.
• Internet Explorer 11 Bildlaufleisten ausgeblendet. Die Pfeiltasten funktionieren nach dem Klicken, um zu fokussieren. Mausrad funktioniert. Windows.
• Safari 5.1.10 Bildlaufleisten ausgeblendet. Die Pfeiltasten funktionieren nach dem Klicken, um zu 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 unter 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.

Ich dachte nur, ich würde jedem anderen, der diese Frage liest, darauf hinweisen, dass die Einstellung overflow: hidden(oder der Überlauf) auf derbody Elements die Bildlaufleisten für mich nicht ausgeblendet hat.

Ich musste das htmlElement verwenden.

Ich habe eine WebKit-Version mit einigen Optionen wie " Automatisch ausblenden" , " Kleine Version" , " Nur-Bildlauf" oder " Nur-X" geschrieben :

._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

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

<style>

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

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

</style>

Mein HTML ist wie folgt:

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

Fügen Sie dies zu Ihrer Stelle hinzu, divan der 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 fügen Sie dies dem Behälter hinzu

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

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

Erfahren Sie mehr darüber: Überlauf .

Meine Antwort wird auch dann angezeigt, wenn Sie overflow:hidden;jQuery verwenden:

Scrollen Sie beispielsweise 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>

Ich glaube, Sie können es mit dem overflowCSS-Attribut manipulieren , aber sie haben eine eingeschränkte Browserunterstützung. Einer Quelle zufolge handelte es sich um Internet Explorer 5 (und höher), Firefox 1.5 (und höher) und Safari 3 (und höher) - möglicherweise genug für Ihre Zwecke.

Scrollen, Scrollen, Scrollen hat eine gute Diskussion.

Ich habe alles versucht und was für meine Lösung am besten funktionierte, war, immer die vertikale Bildlaufleiste anzuzeigen und dann einen negativen Rand hinzuzufügen, um sie auszublenden.

body {
  overflow-y: scroll;
  margin-right: -20px;
}