Impedire che le barre di scorrimento vengano nascoste per gli utenti del trackpad di MacOS in WebKit / Blink

162

Il comportamento predefinito di WebKit / Blink (Safari / Chrome) su MacOS dal 10.7 (Mac OS X Lion) è quello di nascondere le barre di scorrimento agli utenti del trackpad quando non sono in uso. Questo può essere fonte di confusione ; la barra di scorrimento è spesso l'unico segnale visivo che un elemento è scorrevole.

Esempio ( jsfiddle )

HTML

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

CSS

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}

Schermata di WebKit (Chrome)

screenshot di un div senza barra di scorrimento visibile

Screenshot di Presto (Opera)

screenshot di un div con una barra di scorrimento visibile

Come posso forzare la visualizzazione di una barra di scorrimento su un elemento scorrevole in WebKit?

— Jeremy Banks
fonte

Hai provato overflow: scroll? In passato funzionava in Chrome. Dovrebbe forzare la visualizzazione sempre delle barre di scorrimento.

— xaddict

2

Si noti che è anche un problema in Firefox su Mac OS X.

— Blaise

Amico, lo odio quando i siti web creano confusione con l'interfaccia utente sul mio sistema e sul mio user agent.

— AMN

250

L'aspetto delle barre di scorrimento può essere controllato con gli -webkit-scrollbarpseudo-elementi ^{[ blog ] di} WebKit . È possibile disabilitare l'aspetto e il comportamento predefiniti impostando -webkit-appearance ^{[ documenti ]} su none.

Poiché stai rimuovendo lo stile predefinito, dovrai anche specificare tu stesso lo stile o la barra di scorrimento non verrà mai visualizzata. Il seguente CSS ricrea l'aspetto delle barre di scorrimento nascoste:

Esempio ( jsfiddle )

CSS

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
}

Schermata di WebKit (Chrome)

screenshot che mostra la barra di scorrimento di webkit, senza bisogno di passare il mouse

— Jeremy Banks
fonte

1

Per le barre di scorrimento del leone macosx forzato, il trucco descritto qui non funziona con questa tecnica: stackoverflow.com/a/3417992/62255 . Nessun problema, dato che qui stiamo impostando esplicitamente le dimensioni, possiamo accedervi direttamente.

— jedierikb,

5

Nota che puoi anche personalizzare la traccia / lo sfondo della barra di scorrimento con:.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }

— XML

Gli stili della barra di scorrimento del webkit non funzionano in iOS 7 (e possibilmente 6).

— RobW

4

Una cosa da menzionare è che, nei miei test e in un commento molto vecchio di qualcun altro , sembra che tu non possa avere una barra di scorrimento sempre attiva E lo scorrimento simile al momento a cui le persone sono abituate con iOS. Fare il CSS a scorrimento momentaneo ha fatto scomparire le mie barre di scorrimento personalizzate.

— jmq

2

Non l'ho verificato di recente, ma ho trovato questa nota nel nostro CSS che fa riferimento a questa soluzione: "Nota che questo mostrerà barre di scorrimento in stile OS X ad esempio in Chrome su Windows".

— Henrik N,

19

Per un'applicazione Web di una pagina in cui aggiungo sezioni scorrevoli in modo dinamico, innesco le barre di scorrimento di OSX scorrendo a livello di codice un pixel verso il basso e il backup:

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

Ciò innesca l'attenuazione e la dissolvenza del segnale visivo.

— Blaise
fonte

19

Ecco un po 'più breve di codice che riattiva le barre di scorrimento nell'intero sito Web. Non sono sicuro che sia molto diverso dalla risposta più popolare attuale, ma eccola qui:

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Trovato a questo link: http://simurai.com/blog/2011/07/26/webkit-scrollbar

— Alex Banman
fonte

3

Le barre di scorrimento del browser non funzionano affatto su iPhone / iPad. Al lavoro stiamo usando barre di scorrimento JavaScript personalizzate come jScrollPane per fornire un'interfaccia utente coerente tra browser: http://jscrollpane.kelvinluck.com/

Funziona molto bene per me: puoi creare delle barre di scorrimento personalizzate davvero belle che si adattano al design del tuo sito.

— Chris M. Welsh
fonte

2

Un altro buon modo di gestire le barre di scorrimento nascoste di Lion è visualizzare un prompt per scorrere verso il basso. Non funziona con aree di scorrimento piccole come i campi di testo ma bene con aree di scorrimento di grandi dimensioni e mantiene lo stile generale del sito. Un sito che fa questo è http://versusio.com , basta controllare questa pagina di esempio e attendere 1,5 secondi per vedere il prompt:

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

L'implementazione non è difficile ma devi fare attenzione a non visualizzare il prompt quando l'utente ha già fatto scorrere.

Hai bisogno di jQuery + Underscore e

$(window).scroll per verificare se l'utente ha già fatto scorrere da solo,

_.delay() per attivare un ritardo prima di visualizzare il prompt: il prompt non dovrebbe essere invadente

$('#prompt_div').fadeIn('slow') svanire nel tuo prompt e ovviamente

$('#prompt_div').fadeOut('slow') svanire quando l'utente scorre dopo aver visto il messaggio

Inoltre, puoi associare gli eventi di Google Analytics per tenere traccia del comportamento di scorrimento dell'utente.

— user976647
fonte