web-dev-qa-db-de.com

Bildlaufleiste ausblenden, aber noch scrollen können

Ich möchte in der Lage sein, durch die ganze Seite zu scrollen, ohne dass die Bildlaufleiste angezeigt wird.

In Google Chrome ist dies:

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

Aber Mozilla Firefox und Internet Explorer scheinen nicht so zu funktionieren.

Das habe ich auch in CSS versucht:

overflow: hidden;

Dadurch wird die Bildlaufleiste ausgeblendet, aber ich kann nicht mehr scrollen.

Kann ich die Bildlaufleiste auf irgendeine Weise entfernen, während ich immer noch in der Lage bin, einen Bildlauf über die gesamte Seite durchzuführen? Bitte nur mit CSS oder HTML.

951

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 */
}

Working Fiddle

JavaScript:

Da die Breite der Bildlaufleisten in verschiedenen Browsern unterschiedlich ist, ist es besser, sie mit JavaScript zu behandeln. Wenn Sie Element.offsetWidth - Element.clientWidth ausführen, wird die genaue Breite der Bildlaufleiste angezeigt.

JavaScript Working Fiddle

oder

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

Working Fiddle

JavaScript Working Fiddle

Die Info:

Basierend auf dieser Antwort habe ich ein einfaches Scroll-Plugin erstellt. Ich hoffe das hilft jemandem.

697
Mr_Green

Mit WebKit ist das ganz einfach. Optionales Styling:

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;
}
308
Anirban Bhui

Das funktioniert bei mir mit einfachen CSS-Eigenschaften:

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

PDATED: hat die neue Eigenschaft scrollbar-width für Firefox hinzugefügt.

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

186
Hristo Eftimov

UPDATE: Firefox unterstützt jetzt das Ausblenden von Bildlaufleisten mit CSS, sodass jetzt alle gängigen Browser (Chrome, Firefox, IE, Safari usw.) abgedeckt sind.

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;  /* IE 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 Element 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 Zwei-Wege-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;
}
162
Richrd

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 mit einem überlappenden Div zu überlappen, das keine Bildlaufleisten hat:

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

Dies gilt nur für WebKit Browser ... oder Sie können browserspezifischen CSS-Inhalt verwenden (falls vorhanden). Jeder Browser könnte eine andere und spezifische Eigenschaft für die jeweiligen Balken haben.

Verwenden Sie für Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar; oder -ms-overflow-style: none; als per MSDN .

Es gibt keine Entsprechung für Firefox. Obwohl es ein jQuery-Plugin gibt, um dies zu erreichen, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

74
Arpit Singh

Diese Antwort enthält nicht den Code, daher hier die Lösung von Seite :

Laut der Seite muss dieser Ansatz die Breite der Bildlaufleiste nicht im Voraus kennen, um zu funktionieren, und die Lösung funktioniert auch für alle Browser und kann gesehen werden hier .

Das Gute ist, dass Sie nicht gezwungen sind, Auffüllungen oder Breitenunterschiede zu verwenden, um die Bildlaufleiste auszublenden.

Dies ist auch zoomsicher. Bei Füll-/Breitenlösungen wird die Bildlaufleiste angezeigt, wenn auf das Minimum gezoomt wird.

Firefox-Update: 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>
33
Timo Kähkönen

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 Scroll kommt.

21
Innodel

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

div.rightsidebar {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
    width: 0 !important;
}
10
Meloman

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

9
Mischa

Ab dem 11. Dezember 2018 (Firefox 64 und höher) ist die Antwort auf diese Frage sehr einfach, da Firefox 64+ jetzt die CSS Scrollbar Styling-Spezifikation implementiert.

Verwenden Sie einfach das folgende CSS:

scrollbar-width: none;

Firefox 64 Release Note Link hier .

7
Chris

Verwenden:

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

<body>
    <div id="subparent">
        <div id="parent">
            <div id="child">
                <!- code here for scroll ->
            </div>
        </div>
     </div>
 </body>
7
Owais

Das funktioniert bei mir:

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

scroll-content::-webkit-scrollbar{
    width: 0;
}
6
mangesh

Mein Problem: Ich möchte keinen Stil in meinem HTML, ich möchte direkt meinen Körper scrollbar ohne Bildlaufleiste und nur einen vertikalen Bildlauf, der mit CSS-Gittern für jede Bildschirmgröße arbeitet.

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 Scrollbar ausblenden. Ich versuchte -moz-transform und -moz-padding-start, um nur Firefox zu beeinflussen, aber es gab reaktionsschnelle Nebenwirkungen, die zu viel Arbeit erforderten.

Diese Lösung funktioniert für HTML-Textinhalte mit dem 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;  /* IE 10+ */
  overflow: -moz-scrollbars-none; /* should hide scroll bar */
}
/* no scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  display: none; /*  might be enought */
  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;
}
6
Lucile Fievet

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 kann in Chrome immer noch gescrollt werden, da ich es in Chrome getestet habe, aber ich bin mir nicht sicher, ob die anderen Browser funktionieren.

6
user43353

In modernen Browsern können Sie wheel eventhttps://developer.mozilla.org/en-US/docs/Web/Events/wheel verwenden

// content is the element you want to apply the wheel scroll effect
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;
});
5
Doua Beri

Das Hinzufügen von Füllwörtern zu einem inneren div, wie in der aktuell akzeptierten Antwort, funktioniert nicht, wenn Sie aus irgendeinem Grund box-model: border-box verwenden möchten.

In beiden Fällen können Sie die Breite des inneren div auf 100% plus der Breite der Bildlaufleiste erhöhen (vorausgesetzt, overflow: hidden auf dem äußeren div).

Zum Beispiel in CSS:

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

In Javascript browserübergreifend:

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

So mache ich das für horizontales Scrollen, nur CSS und funktioniert gut mit Frameworks wie bootstrap/col- *. Es werden nur 2 zusätzliche Divs und das übergeordnete Element mit einer eingestellten Breite oder maximalen Breite 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>

Kurzversion für faule Leute:

.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>
4
Jean

Dies funktioniert für mich browserübergreifend, es werden jedoch keine systemeigenen Bildlaufleisten auf mobilen Browsern ausgeblendet

.hide-native-scrollbar {
  scrollbar-width: none; /* Firefox 64 */
  -ms-overflow-style: none; /* IE 11 */
  &::-webkit-scrollbar { /** Webkit */
    display: none;
  }
}
4
Murhaf Sousli

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

Es ist eine gut dokumentierte und vollständige JS-basierte Lösung für das Problem mit den Bildlaufleisten.

Demoseite: http://noraesae.github.io/perfect-scrollbar/

3
jmarceli

Dies ist eine Divitis-esque-Lösung, die dennoch für alle Browser funktionieren sollte ...

Das Markup sieht wie folgt aus und muss sich innerhalb einer relativen Position befinden (und die Breite sollte festgelegt werden, z. B. 400px):

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

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

Ich habe die oben genannten Lösungen in meinem Projekt ausprobiert und aus irgendeinem Grund konnte ich die Bildlaufleiste aufgrund der Div-Positionierung nicht ausblenden. Aus diesem Grund 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>

Entsprechendes 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*/
}
3

Eine andere Art von Hacky-Ansatz ist es, overflow-y: hidden zu machen und dann das Element mit so etwas manuell 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' 
  });
 });
}

Es gibt einen großartigen Artikel über das Erkennen und Behandeln von onmousewheel Ereignissen in deepmikoto's Blog. Dies mag für Sie funktionieren, ist aber definitiv keine elegante Lösung.

2
Gark Garcia

Ich wollte nur ein kombiniertes Snippet freigeben, um die Bildlaufleiste auszublenden, die ich beim Entwickeln verwende. Es ist eine Sammlung von mehreren Ausschnitten, die über das Internet gefunden wurden und für mich funktionieren:

    .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 */
    }

Ich hoffe, Sie finden das nützlich: *

1
stamat

Ein weiteres einfaches Geigenspiel :

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

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

Im übergeordneten Container ausgeblendeter Überlauf und im untergeordneten Container automatischer Überlauf. Einfach.

1
geoyws

Stellen Sie einfach die Breite des Kindes auf 100% ein und füllen Sie es mit 15px auf. Overflow-x zum Scrollen und Überlaufen: Ausgeblendet für das übergeordnete Element und in der von Ihnen gewünschten Breite. Funktioniert perfekt in allen gängigen Browsern, einschließlich IE Edge mit Ausnahme von IE8 und niedriger.

2019: Antworten über Werke.

sie müssen den Hintergrund meistens nicht einstellen, aber es gibt einen Fehler, der manchmal die Höhe der Bildlaufleiste beeinträchtigt. Dies können Sie wie unten angegeben beheben

height:0px; /* fixes issue with extra space underneath scrollbar */
width: 0px;  

0
zinoadidi

Ich hatte dieses Problem und es ist sehr einfach zu beheben.

Holen Sie sich zwei Container. Das Innere wird Ihr scrollbarer Container sein und das Äußere wird offensichtlich das Innere beherbergen:

#inner_container { width: 102%; overflow: auto; }
#outer_container { overflow: hidden }

Es ist super einfach und sollte mit jedem Browser funktionieren.

Blenden Sie sowohl horizontale als auch vertikale Bildlaufleisten aus.

Siehe Fiddle hier

HTML

 <div id="container1">
    <div id="container2">
    <pre>

Select from left and drag to right to scroll this very long sentence. This should not show scroll bar at bottom or on the side. Keep scrolling .......... ............ .......... ........... This Fiddle demonstrates that scrollbar can be hidden. ..... ..... ..... .....
    </pre>

    </div>
    <div>

CSS

* {
    margin:0;
}
#container1 {
    height: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
#container2 {
    position: absolute;
    top: 0px;
    bottom: -15px;
    left: 0px;
    right: -15px;
    overflow: auto;
}
0
AnupRaj

sie können den folgenden Code verwenden, um den Bildlauf auszublenden, während Sie noch einen Bildlauf durchführen können

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