Bildlaufleiste ausblenden, aber trotzdem scrollen können

1128

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.

Oussama el Bachiri
quelle

Antworten:

788

Nur ein Test, der gut funktioniert.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Geige arbeiten

JavaScript:

Da die Breite der Bildlaufleiste in verschiedenen Browsern unterschiedlich ist, ist es besser, sie mit JavaScript zu behandeln. In diesem Element.offsetWidth - Element.clientWidthFall wird die genaue Breite der Bildlaufleiste angezeigt.

JavaScript Working Fiddle

Oder

Verwenden von Position: absolute,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Geige arbeiten

JavaScript Working Fiddle

Information:

Basierend auf dieser Antwort habe ich ein einfaches Scroll-Plugin erstellt .

Herr Green
quelle
16
In Ihrer letzten "Arbeitsgeige" habe ich zu viele gesehen, !importantalso habe ich sie alle entfernt: jsfiddle.net/5GCsJ/954
Roko C. Buljan
2
Diese Lösung funktioniert nicht, wenn die Breite des Inhalts auf auto eingestellt ist. Wenn Sie ganz nach rechts scrollen, ist ein Teil des Inhalts immer noch nicht sichtbar. Warum ist das so? Irgendwelche Lösungen? Überprüfen Sie das Problem hier: jsfiddle.net/50fam5g9/7 Hinweis: Die Breite des Inhalts kann in meinem Fall nicht im Voraus bekannt sein, daher muss er auf auto eingestellt werden.
Sprout Coder
35
Dieser Ansatz deckt nicht alle Browser ab und ist sehr spezifisch für die Browserversion, mit der Sie während der Entwicklung arbeiten.
Itsik Avidan
2
Was ist mit den horizontalen Bildlaufleisten? Wie kannst du die verstecken?
www139
11
Warum die Breite der Bildlaufleiste komplizieren und berechnen? Einfach einstellen box-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 ...
Robert Koritnik
361

Mit WebKit ist dies mit optionalem Design ganz einfach:

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: #FF0000;
}
Anirban Bhui
quelle
1
versuchte dies in der cordovaApp, funktionierte gut. musste overflow:scrollauf element anwenden .
Kishor Pawar
41
Funktioniert nicht mit Firefox, ganz offensichtlich, da hier nur das Webkit angegeben ist. Danke :)
Zohair
3
funktioniert wie erwartet hervorragend in Electron-Apps, da sie Chrom sind. +1 danke: D
Rokoko
Seit iOS8 funktioniert dies nicht, wenn es mit-webkit-overflow-scrolling: touch
aleclarson
4
es funktioniert mit Chrom. funktioniert aber nicht mit Mozilla Firefox.
Romal Löwenzahn
299

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;

Hristo Eftimov
quelle
13
overflow: -moz-scrollbars-noneVersteckt 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?
Chipit24
1
Leider wird die -moz-scrollbars-noneEigenschaft für die neuesten Firefox-Versionen gelöscht: developer.mozilla.org/en-US/docs/Web/CSS/overflow
Hristo Eftimov
2
Seit iOS8 funktioniert dies nicht, wenn es mit-webkit-overflow-scrolling: touch
aleclarson
3
Für veraltete Firefox können -moz-scrollbars-noneSie verwenden @-moz-document url-prefix() { .container { overflow: hidden; } }. Siehe stackoverflow.com/questions/952861/… .
Martin Ždila
1
Ich habe meine Antwort mit der neuesten Unterstützung für Firefox aktualisiert :)
Hristo Eftimov
292

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:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

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:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-right: -50px; /* Maximum width of scrollbar */
  padding-right: 50px; /* Maximum width of scrollbar */
  overflow-y: scroll;
}
Richrd
quelle
39
Ich weiß, dass dies eine neue Antwort auf eine alte Frage ist, aber dies sollte jetzt die akzeptierte Antwort sein. Gutes Zeug Mann.
Vektor
3
Dies ist zweifellos die absolut beste Antwort. Wie ändert man es nun, um horizontale Bildlaufleisten auszublenden?
CeeMoney
1
@CeeMoney Ich habe eine horizontale Demo hinzugefügt. Für Inhaltselemente mit fester Breite wie Bilder sollte es nur funktionieren, aber für Text müssen Sie das Umbrechen deaktivieren.
Richrd
1
@Richrd - vielen Dank für die Demo - funktioniert perfekt. Ich weiß nicht, warum wir es alle so schwer machen, aber das ist so einfach. Ich bin dumm, dass ich das vorher nicht getan habe.
CeeMoney
4
Danke @Richrd! Ich bin so froh, dass ich zu Ihrer Antwort gescrollt habe. Wenn SO eine "erzwungene akzeptierte Antwort" hätte, würde ich sie jetzt definitiv verwenden.
Martin D
78

Verwenden:

<div style='overflow:hidden; width:500px;'>
   <div style='overflow:scroll; width:508px'>
      My scroll-able area
   </div>
</div>

Dies ist ein Trick, um die Bildlaufleiste etwas mit einem überlappenden Div zu überlappen, das keine Bildlaufleisten enthält:

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

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

Arpit Singh
quelle
ictacademie.info/oussamaelbachiri Diese Seite @Oussama Dobby verwendet die Eigenschaft media = 'screen' und dann die Eigenschaft ':: - webkit-scrollbar' für css
Arpit Singh
Und was sind die spezifischen CSS-Eigenschaften?
Oussama el Bachiri
entweder ein hackiges Layout oder eine Abfrage ist eine Alternative
Arpit Singh
Ihre erste Lösung gibt mir dieses Problem s24.postimg.org/idul8zx9w/Naamloos.jpg Und was meinen Sie mit hackigem Layout @ArpitSingh
Oussama el Bachiri
4
Das Folgende ermöglichte es mir, das native Scrollen in Cordova mit jQuery Mobile 1.4 unter iOS7 und iOS8 zu aktivieren. // CSS ::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; } // jQuery Mobile onMobileInit () $.mobile.touchOverflowEnabled = true;
Ryan Williams
33

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

.element,
.outer-container {
  width: 200px;
  height: 200px;
}
.outer-container {
  border: 5px solid purple;
  position: relative;
  overflow: hidden;
}
.inner-container {
  position: absolute;
  left: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-right: 150px;
}
.inner-container::-webkit-scrollbar {
  display: none;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="element">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut
      dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique
      aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie
      vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies.
    </div>
  </div>
</div>

Timo Kähkönen
quelle
Dies funktioniert nicht für alle Browser ... Nur Webkit-Browser. Sie verwenden einen Webkit-spezifischen Selektor::-webkit-scrollbar {}
Präfix
Ich habe es in allen neuen Browsern getestet, bevor ich die Frage beantwortet habe. Auch FF. Es hat einige Änderungen in FF passiert?
Timo Kähkönen
Ich habe die Antwort aktualisiert. Es scheint, dass das Hinzufügen es padding-right: 150px;behebt. Getestet in FF, Chrome, Safari und Edge. Funktioniert auch bei niedrigen Zoomstufen aufgrund der großen rechten Polsterung.
Timo Kähkönen
2
Unterstützung für Edge, IE 11, IE10 (möglicherweise auch niedriger) html { -ms-overflow-style: none;}. In diesen Browsern muss kein Padding-Hack verwendet werden.
Timo Kähkönen
Musste @ Timos Antwort verwenden und overflow-y: scrollum ein Bildlaufverhalten zu erhalten, aber versteckt (genau wie Chrome), damit es auf Edge23 funktioniert.
Jojo
21

Verwenden Sie einfach die folgenden drei Zeilen und Ihr Problem wird gelöst:

#liaddshapes::-webkit-scrollbar {
    width: 0 !important;
}

Wo Liaddshapes ist der Name des Div, wo die Schriftrolle kommt.

Innodel
quelle
Zeigen Sie mir Ihr Problem in der Geige
Innodel
1
Einfach und nützlich, danke! Ich habe {display: none} anstelle von {width: 0;} verwendet und arbeite auch
Santi Nunez
2
Funktioniert nicht unter MS Edge oder Firefox.
Dpedrinha
18

Dies funktioniert bei mir browserübergreifend. Dies verbirgt jedoch keine nativen Bildlaufleisten in mobilen Browsern.

In SCSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
  &::-webkit-scrollbar { /** WebKit */
    display: none;
  }
}

In CSS

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
  display: none;
}
Murhaf Sousli
quelle
Was bedeuten verschachtelte Blöcke ( {})? Wie ist es zu interpretieren? Und das &? Vielleicht in Ihrer Antwort näher erläutern?
Peter Mortensen
Es ist eine SASS-Sache (anscheinend auch WENIGER
vipatron
@ PeterMortensen Ich habe gerade Ihren Kommentar gesehen, &::-webkit-scrollbarwird .hide-native-scrollbar::-webkit-scrollbar { }in CSS
Murhaf Sousli
Tun Sie dies einfach { width: 0; height: 0;}für :: - Webkit-Bildlaufleiste anstatt display: nonefür iOS.
Adriendenat
In FF71 blockiert dies das Scrollen.
Gen b.
11

Folgendes hat für mich unter Microsoft, Chrome und Mozilla für ein bestimmtes div-Element funktioniert:

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}
Meloman
quelle
Beachten Sie, dass scrollbar-width(nur FF) als "experimentell" gekennzeichnet ist
Cimak
Ja, @cimak, aber bei FF können Sie es ohne Probleme ausblenden, sodass es wirklich nur für Chrome verwendet wird.
Meloman
9

HTML:

<div class="parent">
    <div class="child">
    </div>
</div>

CSS:

.parent{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}

.child {
    height: 150px;   
    width: 318px;
    overflow-y: scroll;
}

Wenden Sie CSS entsprechend an.

Überprüfen Sie es hier (getestet in Internet Explorer und Firefox).

Mischa
quelle
8

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:

scrollbar-width: none;

Link zum Versionshinweis zu Firefox 64 hier .

Chris
quelle
3
Das ist sehr schön zu wissen! Es scheint, dass die Browser tatsächlich Fortschritte machen, haha!
Oussama el Bachiri
7

Verwenden:

CSS

#subparent {
    overflow: hidden;
    width: 500px;
    border: 1px rgba(0, 0, 0, 1.00) solid;
}

#parent {
    width: 515px;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 10%;
}

#child {
    width: 511px;
    background-color: rgba(123, 8, 10, 0.42);
}

HTML

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- Code here for scroll ->
            </div>
        </div>
     </div>
</body>
Owais
quelle
Ich bin mir nicht sicher, warum dies abgelehnt wurde, aber ich habe es nur positiv bewertet, da es in die richtige Richtung geht. Die anderen Lösungen haben in meinem Fall nicht wirklich gut funktioniert. Überlauf-x: versteckt; + Überlauf-y: scrollen; hat den Trick gemacht, zusammen mit der> 100% Breite (110% in meinem Fall hat gut funktioniert).
dAngelov
1
Es ist das Gleiche wie die am besten bewertete Lösung: Der Versuch, die Bildlaufleiste auszublenden. Dies ist nicht ideal, da es mit dem Browser variiert
MWM
6

Verwenden

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // Firefox, Chrome
    document.body.scroll = "yes"; // Internet Explorer only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // Internet Explorer only
}

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.

user43353
quelle
6

Das funktioniert bei mir:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}
Mangesh
quelle
5

In modernen Browsern können Sie Folgendes verwenden wheel event:

// Content is the element you want to apply the wheel scroll effect to
content.addEventListener('wheel', function(e) {
    const step = 100; // How many pixels to scroll

    if (e.deltaY > 0) // Scroll down
        content.scrollTop += step;
    else // Scroll up
        content.scrollTop -= step;
});
Doua Beri
quelle
Dies ist die Antwort, nach der ich gesucht habe. Vielen Dank. Ich habe overflow: hiddendiesen Code verwendet, damit mat-card-content(in Winkel 5 natürlich) scrollbar ist und diese mein Problem gelöst haben. Hinweis: Ich habe es e.deltaYals mein verwendet stepund es hat wie normales Scrollen funktioniert, daher denke ich, dass es für normales Scrollen die beste Übereinstimmung ist, wenn die Bildlaufleiste ausgeblendet ist.
Imans77
1
Die hier verlinkte Seite warnt davor, dass dieser Ansatz nicht angemessen ist.
jnnnnn
5

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

/* Hide HTML and body scroll bar in CSS grid context */
html, body {
  position: static; /* Or relative or fixed ... */
  box-sizing: content-box; /* Important for hidding scrollbar */
  display: grid; /* For CSS grid */

  /* Full screen */
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
}

html {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}

/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none; /* Might be enough */
  background: transparent;
  visibility: hidden;
  width: 0px;
}

/* Firefox only workaround */
@-moz-document url-prefix() {
  /* Make HTML with overflow hidden */
  html {
    overflow: hidden;
  }

  /* Make body max height auto */
  /* Set right scroll bar out the screen  */
  body {
    /* Enable scrolling content */
    max-height: auto;

    /* 100vw +15px: trick to set the scroll bar out the screen */
    width: calc(100vw + 15px);
    min-width: calc(100vw + 15px);
    max-width: calc(100vw + 15px);

    /* Set back the content inside the screen */
    padding-right: 15px;
  }
}

body {
  /* Allow vertical scroll */
  overflow-y: scroll;
}
Lucile Fievet
quelle
4

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öchten box-model: border-box.

In beiden Fällen erhöht sich die Breite des inneren divBereichs auf 100% zuzüglich der Breite der Bildlaufleiste (vorausgesetzt, overflow: hiddender äußere Teil wird verwendet).

Zum Beispiel in CSS:

.container2 {
    width: calc(100% + 19px);
}

Browserübergreifend in JavaScript:

var child = document.getElementById('container2');
var addWidth = child.offsetWidth - child.clientWidth + "px";
child.style.width = 'calc(100% + ' + addWidth + ')';
ihr Mann
quelle
4

So mache ich es für horizontales Scrollen; Nur CSS und funktioniert gut mit Frameworks wie Bootstrap / col- *. Es werden nur zwei zusätzliche divs und der Elternteil mit einem widthoder einem max-widthSatz benötigt:

Sie können den Text zum Scrollen auswählen oder mit den Fingern scrollen, wenn Sie einen Touchscreen haben.

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
    overflow-x: hidden;
    margin-bottom: -17px;
    overflow-y: hidden;
    width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 17px;
    white-space: nowrap;
    cursor: pointer
}

/* The following classes are only here to make the example looks nicer */
.row {
    width: 100%
}
.col-xs-4 {
    width: 33%;
    float: left
}
.col-xs-3 {
    width:25%;
    float:left
}
.bg-gray {
    background-color: #DDDDDD
}
.bg-orange {
    background-color:#FF9966
}
.bg-blue {
    background-color: #6699FF
}
.bg-orange-light{
    background-color: #FFAA88
}
.bg-blue-light{
    background-color: #88AAFF
}
<html><body>
  <div class="row">
    <div class="col-xs-4 bg-orange">Column 1</div>
    <div class="col-xs-3 bg-gray">Column 2</div>
    <div class="col-xs-4 bg-blue">Column 3</div>
  </div>
  <div class="row">
    <div class="col-xs-4 bg-orange-light">Content 1</div>
    <div class="col-xs-3 overflow-x-scroll-no-scrollbar">
      <div>
        <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
      </div>
    </div>
    <div class="col-xs-4 bg-blue-light">Content 3</div>
  </div>
</body></html>

Kurzfassung für Faule:

.overflow-x-scroll-no-scrollbar {
    overflow: hidden;
}
.overflow-x-scroll-no-scrollbar div {
  overflow-x: hidden;
  margin-bottom: -17px;
  overflow-y: hidden;
  width: 100%;
}
.overflow-x-scroll-no-scrollbar div * {
  overflow-x: auto;
  width: 100%;
  padding-bottom: 17px;
  white-space: nowrap;
  cursor:pointer
}

/* The following classes are only here to make the example looks nicer */
.parent-style {
    width: 100px;
    background-color: #FF9966
}
<div class="parent-style overflow-x-scroll-no-scrollbar">
  <div>
    <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div>
  </div>
</div>

Jean
quelle
Danke, ich habe es versucht, es funktioniert großartig. Eine Sache ist, dass es besser ist, sich zu ändern margin-bottom, padding-bottomaber mit dem gleichen Wert. Dies wird nicht unter dem Platz für das Element unten verschlingen. Es verhindert Überlappungen.
Haxpor
@haxpor Das margin-bottomist negativ, ich denke, es kann nicht in ein geändert werden padding-bottom, das keine negativen Werte verarbeiten kann
Jean
4

Das folgende SASS- Design sollte Ihre Bildlaufleiste in den meisten Browsern transparent machen (Firefox wird nicht unterstützt):

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}
Alexander
quelle
3

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:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

Das entsprechende CSS lautet wie folgt:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}
Adam Ranganathan
quelle
3

Dies wird am Körper sein:

<div id="maincontainer" >
<div id="child">this is the 1st step</div>
<div id="child">this is the 2nd step</div>
<div id="child">this is the 3rd step</div>

Und das ist das CSS:

#maincontainer
{
    background: grey;
    width: 101%;
    height: 101%;
    overflow: auto;
    position: fixed;
}

#child
{
    background: white;
    height:500px;
}
Hilla
quelle
3

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

<div class="hide-scrollbar">
    <div class="scrollbar">
        <div class="scrollbar-inner">

        </div>
    </div>
</div>

Das CSS:

.hide-scrollbar {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.scrollbar {
    overflow-y: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: -50px;
    bottom: 0;
}

.scrollbar-inner {
    width: 400px;
}
Peter Mortensen
quelle
3

Das perfect-scrollbarPlugin scheint der richtige Weg zu sein, siehe: https://github.com/noraesae/perfect-scrollbar

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

jmarceli
quelle
2
Ich kann nicht sehen, wie das mit der Frage zusammenhängt.
Chris Nevill
3
Ich habe 2 Minuten lang auf die perfekte Bildlaufleiste gestarrt, ohne sofort zu erfahren, wie man sie zum Ausblenden der Bildlaufleiste verwendet . Wenn Sie Ihre Antwort zu diesem Thema erweitern würden, würden Sie sicher mehr positive Stimmen erhalten.
Christiaan Westerbeek
2

Eine andere Art von hackigem Ansatz besteht darin, overflow-y: hiddendas Element manuell zu scrollen und dann folgendermaßen zu scrollen:

function detectMouseWheelDirection(e) {
  var delta = null, direction = false;
  if (!e) { // If the event is not provided, we get it from the window object
    e = window.event;
  }
  if (e.wheelDelta) { // Will work in most cases
    delta = e.wheelDelta / 60;
  } else if (e.detail) { // Fallback for Firefox
    delta = -e.detail / 2;
  }
  if (delta !== null) {
    direction = delta > 0 ? -200 : 200;
  }
  return direction;
}

if (element.addEventListener) {
  element.addEventListener('DOMMouseScroll', function(e) {
    element.scrollBy({
      top: detectMouseWheelDirection(e),
      left: 0,
      behavior: 'smooth'
    });
  });
}

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

Gark Garcia
quelle
2

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:

.container {
    overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */

    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    scrollbar-width: none;
}


.container::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}
stamat
quelle
2

Sie können den folgenden Code verwenden, um die Bildlaufleiste auszublenden, während Sie dennoch scrollen können:

.element::-webkit-scrollbar { 
    width: 0 !important 
}
Tienanhvn
quelle
2

Verwenden Sie zum Ausblenden von Bildlaufleisten für Elemente mit überfülltem Inhalt.

.div{

  scrollbar-width: none; /* The most elegant way for Firefox */

}    
Alvin Moyo
quelle
Die Unterstützung ist praktisch nicht vorhanden, außer dass FF, wie Sie erwähnt haben, zu wenig für das ist, was das OP verlangt hat. Überprüfen Sie caniuse.com/#feat=mdn-css_properties_scrollbar-width
Adrien
@Adrien Nun, die ursprüngliche Frage besagte, dass sie eine Lösung für andere Browser haben. (Aber Mozilla Firefox und Internet Explorer scheinen nicht so zu funktionieren), sagt er, das ist der Grund, warum ich die Firefox-Lösung gegeben habe.
Alvin Moyo
Ich fand, dass dies gut funktionierte, wenn es mit dem Äquivalent kombiniert wurde: div :: - webkit-scrollbar {display: none; } für Webkit / Chrome.
Sean Halls
1

Eine weitere einfache Arbeitsgeige :

#maincontainer {
    background: orange;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

#childcontainer {
    background: yellow;
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 20px;
    overflow: auto;
}

Überlauf im übergeordneten Container ausgeblendet und Überlauf automatisch im untergeordneten Container. Einfach.

Geoyws
quelle
Dadurch wird die Bildlaufleiste nicht ausgeblendet, sondern nur mit dem Wert "left" aus dem Blickfeld verschoben.
Robertmiles3
@ robertmiles3 ist das nicht dasselbe? sich verstecken und nicht sehen können?
Bryan Willis
1
@ robertmiles3 Die oben ausgewählte Antwort macht dasselbe von rechts. Scheint, als wären alle Lösungen hackig, bis FIrefox beschließt, CSS zu erlauben, Bildlaufleisten wieder auszublenden. blogs.msdn.com/b/kurlak/archive/2013/11/03/…
geoyws
Ich muss zustimmen. Dies ist eine ähnliche Lösung, die von der akzeptierten Antwort vorgeschlagen wird. Wenn es funktioniert, funktioniert es. upvoted
JSON
1

Diese knifflige Lösung funktioniert auch mit alten IE-Webbrowsern

Es ist eine Problemumgehung für die [ vertikale Bildlaufleiste ]

<html>
<head>
<style>
html,body{
         overflow:-moz-scrollbars-vertical;
         overflow-x:hidden;
         overflow-y:hidden;
         height:100%;
         margin:0 0 0 0
         }
</style>
</head>
<body id=body
      style="overflow:auto;
             height:100%" 
      onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
//your stuff here
</body> 
</html>

Probieren Sie es einfach aus : jsfiddle

PYK
quelle
0

Stellen Sie einfach die Breite der Breite des Kindes auf 100% ein und füllen Sie sie auf 15 Pixel auf, um overflow-xzu scrollen und overflow:hiddenfü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.

Sibongiseni Bentley Msomi
quelle