CSS di overflow scorrimento e barra di scorrimento nascoste (iOS)

Question

Nella mia app ho bisogno di utilizzare

-webkit-overflow-scrolling: touch; 

Perché il rotolo su iOS si sente a "duro". Ma ho bisogno di nascondere la barra di scorrimento.

ho qualcosa di simile a questo:

.container { 
    -webkit-overflow-scrolling: touch; 
} 

.container::-webkit-scrollbar { 
    display: none; 
    height: 0; 
    width: 0; 
} 

Ora il rotolo si sente molto fluido, ma posso ancora vedere la barra di scorrimento ...

Answer 1

Ho appena avuto un gioco con questo codepen (https://codepen.io/devstreak/pen/dMYgeO) e sembra che se si imposta background-color su transparent per tutte e tre le proprietà di seguito, lo scroll (e in questo esempio rimuovi anche box-shadow s), la barra di scorrimento non è affatto visibile:

#style-1::-webkit-scrollbar-track 
{ 
// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1); 
    background-color: transparent; 
} 

#style-1::-webkit-scrollbar 
{ 
    background-color: transparent; 
} 

#style-1::-webkit-scrollbar-thumb 
{ 
// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
    background-color: transparent; 
} 

Questo è stato testato in Chrome Desktop, Chrome per Android e iOS Safari (v8.4) su un iPhone 6+.

Vorrei comunque consigliare per l'esperienza utente (usabilità/accessibilità) per mantenere visibile la barra di scorrimento, poiché anche io, sapendo cosa stavo facendo, mi sono un po 'confuso quando non c'era alcuna barra di scorrimento.