Nasconde la barra di scorrimento, ma è comunque possibile scorrere

Voglio poter scorrere l'intera pagina, ma senza che la barra di scorrimento venga mostrata.

In Google Chrome è:

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

Ma Mozilla Firefox e Internet Explorer non sembrano funzionare così.

Ho anche provato questo nei CSS:

overflow: hidden;

Ciò nasconde la barra di scorrimento, ma non riesco più a scorrere.

C'è un modo in cui posso rimuovere la barra di scorrimento mentre riesco ancora a scorrere l'intera pagina?

Con solo CSS o HTML, per favore.

Solo un test che sta funzionando bene.

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

Fiddle di lavoro

JavaScript:

Poiché la larghezza della barra di scorrimento differisce in diversi browser, è meglio gestirla con JavaScript. In tal caso Element.offsetWidth - Element.clientWidth, verrà visualizzata la larghezza esatta della barra di scorrimento.

JavaScript Working Fiddle

O

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

Fiddle di lavoro

JavaScript Working Fiddle

Informazione:

Sulla base di questa risposta, ho creato un semplice plugin di scorrimento .

È facile in WebKit, con uno stile opzionale:

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

Questo funziona per me con semplici proprietà CSS:

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

Per le versioni precedenti di Firefox, utilizzare: overflow: -moz-scrollbars-none;

AGGIORNARE:

Firefox ora supporta le barre di scorrimento nascoste con CSS, quindi ora sono coperti tutti i principali browser (Chrome, Firefox, Internet Explorer, Safari, ecc.).

È sufficiente applicare il seguente CSS all'elemento da cui si desidera rimuovere le barre di scorrimento:

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

Questa è la soluzione cross browser meno complicata di cui sono attualmente a conoscenza. Guarda la demo.

RISPOSTA ORIGINALE:

Ecco un altro modo che non è stato ancora menzionato. È davvero semplice e coinvolge solo due div e CSS. Non è necessario JavaScript o CSS proprietario e funziona in tutti i browser. Non richiede nemmeno l'impostazione esplicita della larghezza del contenitore, rendendolo così fluido.

Questo metodo utilizza un margine negativo per spostare la barra di scorrimento fuori dal genitore e quindi la stessa quantità di riempimento per riportare il contenuto nella posizione originale. La tecnica funziona con scorrimento verticale, orizzontale e bidirezionale.

Demos:

• Verticale
• Orizzontale
• Entrambe le direzioni

Codice di esempio per la versione verticale:

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

Uso:

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

Questo è un trucco per sovrapporre in qualche modo la barra di scorrimento con un div sovrapposto che non ha barre di scorrimento:

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

Questo è solo per WebKit browser ... O potresti usare contenuti CSS specifici del browser (se ce ne sono in futuro). Ogni browser potrebbe avere una proprietà diversa e specifica per le rispettive barre.

Per uso Microsoft Edge: -ms-overflow-style: -ms-autohiding-scrollbar;o -ms-overflow-style: none;come per MSDN .

Non esiste un equivalente per Firefox. Sebbene ci sia un plugin jQuery per raggiungere questo obiettivo, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Questa risposta non include il codice, quindi ecco la soluzione dalla pagina :

Secondo la pagina questo approccio non ha bisogno di conoscere in anticipo la larghezza della barra di scorrimento per funzionare e la soluzione funziona anche per tutti i browser, e può essere vista qui .

La cosa buona è che non sei costretto a usare le imbottiture o le differenze di larghezza per nascondere la barra di scorrimento.

Anche questo è sicuro per lo zoom. Le soluzioni di imbottitura / larghezza mostrano la barra di scorrimento quando vengono ingrandite al minimo.

Correzione di Firefox: 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>

Basta usare le seguenti tre righe e il problema sarà risolto:

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

Dove liaddshapes è il nome del div dove sta arrivando lo scroll.

Questo funziona per me su più browser. Tuttavia, ciò non nasconde barre di scorrimento native nei browser mobili.

In SCSS

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

Nel CSS

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

Quanto segue funzionava per me su Microsoft, Chrome e Mozilla per un elemento div specifico:

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

Applicare i CSS di conseguenza.

Controlla qui (testato in Internet Explorer e Firefox).

A partire dall'11 dicembre 2018 (Firefox 64 e versioni successive), la risposta a questa domanda è davvero molto semplice poiché Firefox 64+ implementa ora le specifiche CSS Styling Styling .

Usa il seguente CSS:

scrollbar-width: none;

Link alla nota di rilascio di Firefox 64 qui .

Uso:

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>

Uso

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
}

Chiamare queste funzioni per qualsiasi punto che si desidera caricare o scaricare o ricaricare le barre di scorrimento. È ancora scorrevole in Chrome come l'ho testato in Chrome, ma non sono sicuro degli altri browser.

Questo funziona per me:

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

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

Sui browser moderni puoi usare 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;
});

Il mio problema: non desidero alcuno stile nel mio contenuto HTML. Voglio che il mio corpo scorra direttamente senza alcuna barra di scorrimento e solo uno scorrimento verticale, lavorando con le griglie CSS per qualsiasi dimensione dello schermo.

Il valore del ridimensionamento delle scatole influisce sulle imbottiture o sulle soluzioni a margine, funzionano con il ridimensionamento delle scatole: content-box .

Ho ancora bisogno della direttiva "-moz-scrollbars-none" e, come gdoron e Mr_Green, ho dovuto nascondere la barra di scorrimento. Ho provato -moz-transforme -moz-padding-start, per avere un impatto solo su Firefox, ma c'erano effetti collaterali che richiedevano troppo lavoro.

Questa soluzione funziona per il contenuto del corpo HTML con stile "display: grid" ed è reattiva.

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

L'aggiunta di un padding a un interno div, come nella risposta attualmente accettata, non funzionerà se per qualche motivo si desidera utilizzare box-model: border-box.

Ciò che funziona in entrambi i casi è aumentare la larghezza dell'interno dival 100% più la larghezza della barra di scorrimento (supponendooverflow: hidden sul div esterno).

Ad esempio, nei CSS:

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

In JavaScript, browser incrociato:

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

Ecco come lo faccio per lo scorrimento orizzontale; solo CSS e funziona bene con framework come Bootstrap / col- *. Ha solo bisogno di due extra dive il genitore con un widthomax-width set:

È possibile selezionare il testo per farlo scorrere o scorrere con le dita se si dispone di un touchscreen.

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

Versione breve per persone pigre:

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

Il seguente stile SASS dovrebbe rendere la barra di scorrimento trasparente sulla maggior parte dei browser (Firefox non è supportato):

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

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

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

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

Mi capita di provare le soluzioni di cui sopra nel mio progetto e per qualche motivo non sono riuscito a nascondere la barra di scorrimento a causa del posizionamento div. Quindi, ho deciso di nascondere la barra di scorrimento introducendo un div che la copre superficialmente. L'esempio seguente è per una barra di scorrimento orizzontale:

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

Il CSS corrispondente è il seguente:

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

Questo sarà al corpo:

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

E questo è il CSS:

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

#child
{
    background: white;
    height:500px;
}

Questa è una soluzione divitis-esque che tuttavia dovrebbe funzionare per tutti i browser ...

Il markup è il seguente e deve essere all'interno di qualcosa con posizionamento relativo (e la sua larghezza deve essere impostata, ad esempio 400 pixel):

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

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

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

Il perfect-scrollbarplugin sembra essere la strada da percorrere, vedi: https://github.com/noraesae/perfect-scrollbar

È una soluzione ben documentata e completa basata su JavaScript per il problema delle barre di scorrimento.

Pagina di dimostrazione: http://noraesae.github.io/perfect-scrollbar/

È possibile utilizzare il codice seguente per nascondere la barra di scorrimento, ma pur essendo in grado di scorrere:

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

Per nascondere le barre di scorrimento per gli elementi con contenuto traboccante, utilizzare.

.div{

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

}    

Un altro tipo di approccio hacky è quello di fare overflow-y: hiddene quindi scorrere manualmente l'elemento con qualcosa del genere:

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

C'è un ottimo articolo su come rilevare e gestire gli onmousewheeleventi nel blog di deepmikoto . Questo potrebbe funzionare per te, ma non è sicuramente una soluzione elegante.

Volevo solo condividere uno snippet combinato per nascondere la barra di scorrimento che utilizzo durante lo sviluppo. È una raccolta di diversi frammenti trovati su Internet che funziona per me:

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

Un altro semplice violino funzionante :

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

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

Overflow nascosto nel contenitore padre e overflow automatico nel contenitore figlio. Semplice.

Questa soluzione complicata funziona anche sul vecchio browser Web IE

È una soluzione alternativa alla [ barra di scorrimento verticale ]

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

Basta provarlo: jsfiddle

Basta impostare la larghezza della larghezza del bambino al 100%, imbottitura a 15 pixel, overflow-xper scorrere eoverflow:hidden per il genitore e la larghezza desiderata.

Funziona perfettamente su tutti i principali browser, inclusi Internet Explorer e Edge, ad eccezione di Internet Explorer 8 e versioni precedenti.