Nascondere la barra di scorrimento, ma mentre si può ancora scorrere

Voglio essere in grado di 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 in CSS:

overflow: hidden;

Questo nasconde la barra di scorrimento, ma non posso più scorrere.

C'è un modo per rimuovere la barra di scorrimento mentre sono ancora in grado di scorrere l'intera pagina?

Con solo CSS o HTML, per favore.

Peter Mortensen
Domanda modificata 10º novembre 2019 в 11:47
Programmazione
internet-explorer firefox google-chrome html css
21º maggio 2013 в 1:11
27 visualizzazioni
Soluzione

Solo un test che funziona 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][1]

JavaScript:

Poiché la larghezza della barra di scorrimento differisce nei diversi browser, è meglio gestirla con JavaScript. Se fai Element.offsetWidth - Element.clientWidth, l'esatta larghezza della barra di scorrimento apparirà.

[JavaScript Working Fiddle][2]

Or

Usando 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][3]

[JavaScript Working Fiddle][4]

Informazioni:

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

Peter Mortensen
Risposta modificata 10º novembre 2019 в 11:49
Commentari (23)

Utilizzare:

<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 alcuna barra di scorrimento:

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

Questo è solo per i browser WebKit... Oppure si potrebbe usare un contenuto CSS specifico per il browser (se ce ne sarà uno in futuro). Ogni browser potrebbe avere una proprietà diversa e specifica per le rispettive barre.

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

Non c'è un equivalente per Firefox. Anche se c'è un plugin jQuery per ottenere questo, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Peter Mortensen
Risposta modificata 5º aprile 2019 в 2:26
Commentari (6)

Aggiungere

    overflow: -moz-scrollbars-none;

ha funzionato per me.

Peter Mortensen
Risposta modificata 5º aprile 2019 в 2:26
Commentari (5)