Bildlaufleiste ausblenden, aber trotzdem 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 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.

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 .

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

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;

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:

• Vertikale
• Horizontal
• Beide Richtungen

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

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

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>

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.

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

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

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

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 .

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>

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.

Das funktioniert bei mir:

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

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

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

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

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 + ')';

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>

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

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

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

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

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/

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.

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

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

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

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

.div{

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

}    

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.

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

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.