Nascondi barra di scorrimento in firefox

Question

Voglio nascondere una barra di scorrimento nella pagina, ma posso scorrere come se avesse una barra di scorrimento. quindi non posso usare l'overflow: nascosto perché voglio che possa scorrere come normale ma non riesco a vedere una barra di scorrimento.

quindi utilizzare questo codice CSS (classe non-scroll-corpo è una classe di tag body)

.not-scroll-body::-webkit-scrollbar { 
    display: none; 
} 

Funziona in Chrome, ma quando uso -moz- invece di -webkit- come questo

.not-scroll-body::-moz-scrollbar { 
    display: none; 
} 

Non funziona in Firefox.

Cosa posso fare per farlo funzionare?

Grazie per ogni risposta e mi dispiace per il mio povero lingua inglese :)

Answer 1

Secondo this answer e tutto quello che ho potuto trovare sul web, non c'è Firefox equivalente del selettore -webkit-scrollbar. Apparentemente c'è used to be una proprietà, -moz-scrollbars-none, che è possibile utilizzare per questo, ma da allora è stato rimosso e persone recommend utilizzando overflow:hidden o una soluzione di hackish margin-right: -14px.

Mi dispiace non posso essere più utile - sembra che non ci sia un modo per farlo in modo elegante.

Answer 2

sono stato in grado di nascondere la barra di scorrimento, ma ancora in grado di scorrere con la rotellina del mouse con questa soluzione:

html {overflow: -moz-scrollbars-none;} 

Scaricare il plug https://github.com/brandonaaron/jquery-mousewheel per inserire questa funzione:

jQuery('html,body').bind('mousewheel', function(event) { 
    event.preventDefault(); 
    var scrollTop = this.scrollTop; 
    this.scrollTop = (scrollTop + ((event.deltaY * event.deltaFactor) * -1)); 
    //console.log(event.deltaY, event.deltaFactor, event.originalEvent.deltaMode, event.originalEvent.wheelDelta); 
    }); 

Answer 3

ho supponendo che si desidera per nascondere localmente la barra di scorrimento. In questo voglio dire, non su un server web per il mondo da vedere, ma sulla tua copia locale di firefox, solo per il tuo "piacere di visione".

questo è quello che ho trovato per funzionare su opensuse/kde: in userChrome.css;

#content browser { 
margin-right -12px !important; 
overflow-x:hidden; 
overflow-y:scroll; 
} 

uso -14px di nascondere completamente verticale di scorrimento (di più se il vostro tema sistema dispone di impostazione di scorrimento più ampio). Io uso meno (10px) per vedere solo un po 'di esso in modo da poter fare clic con il pulsante centrale per passare a un punto della pagina.

cosa che ho fatto, ma non sempre funziona, più a lungo: in userContent.css

#content browser { 
overflow:-moz-scrollbars-none; 
} 

oppure

html { 
overflow: -moz-scrollbars-none;} 
} 

sopra usato per lavorare, ma io ora mi ho perso la pergamena della rotellina del mouse. Solo i tasti freccia della tastiera funzionano ora.

Spero di aver capito cosa vuoi e questo aiuta. Landis.

Answer 4

Potrebbe essere possibile utilizzare overflow:-moz-hidden-unscrollable - questo ha funzionato perfettamente per le mie esigenze in parte perché stavo già utilizzando dragscroll.js.

Answer 5

cf: https://stackoverflow.com/a/41021131/4881677

Questo è come lo faccio, solo i CSS e funziona bene con framework come bootstrap. Sono necessari solo 2 div aggiuntivi:

È 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 corta per i più pigri:

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