2016-07-18 28 views
6

In meinem app ich brauchenCSS Überlauf Scrollen und versteckt Scrollbar (iOS)

-webkit-overflow-scrolling: touch; 

Da die Rolle auf iOS fühlt sich zu "hart" zu verwenden. Aber ich muss die Bildlaufleiste ausblenden.

Ich habe so etwas wie dies:

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

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

Nun ist die Schriftrolle fühlt sich sehr flüssig, aber ich kann immer noch die Bildlaufleiste sehen ...

Antwort

2

Ich hatte gerade ein Spiel mit diesem codepen (https://codepen.io/devstreak/pen/dMYgeO) und es scheint, dass, wenn Sie die background-color auf transparent für alle drei Eigenschaften unten setzen, die Scroll (und in diesem Beispiel auch entfernen box-shadow s), ist die Bildlaufleiste überhaupt nicht sichtbar:

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

Dies wurde in Chrome Desktop, Chrome für Android und iOS Safari (v8.4) auf einem iPhone 6+ getestet.

Ich würde jedoch für die Benutzererfahrung empfehlen (Usability/Zugänglichkeit), um die Bildlaufleiste sichtbar zu halten, als sogar ich wusste, was ich tat, wurde ein bisschen verwirrt, wenn es keine Bildlaufleiste gab.

Verwandte Themen