usa la transizione su :: - webkit-scrollbar?

Question

è possibile utilizzare le transizioni sulle barre di scorrimento del webkit? ho provato:

div#main::-webkit-scrollbar-thumb { 
    background: rgba(255,204,102,0.25); 
    -webkit-transition: background 1s; 
    transition: background 1s; 
} 

div#main:hover::-webkit-scrollbar-thumb { 
    background: rgba(255,204,102,1); 
} 

ma non sta funzionando. Oppure è possibile creare un effetto simile (senza javascript)?

Here is a jsfiddle showing the rgba transition problem

Answer 1

È abbastanza facile da ottenere utilizzando la tecnica background-color: inherit; di Mari M in aggiunta a -webkit-background-clip: text;.

Demo in diretta; https://jsfiddle.net/s10f04du/

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    .container { 
    overflow-y: scroll; 
    overflow-x: hidden; 
    background-color: rgba(0,0,0,0); 
    -webkit-background-clip: text; 
    transition: background-color .8s; 
    } 
    .container:hover { 
    background-color: rgba(0,0,0,0.18); 
    } 
    .container::-webkit-scrollbar-thumb { 
    background-color: inherit; 
    } 
} 

Answer 2

C'è una discreta quantità che si può fare per lo stile della barra di scorrimento:

::-webkit-scrollbar { 
    width: 18px; 
    height: 20px; 
} 
::-webkit-scrollbar-thumb { 
    height: 6px; 
    border: 4px solid rgba(0, 0, 0, 0); 
    background-clip: padding-box; 
    -webkit-border-radius: 7px; 
    background-color: rgba(0, 0, 0, 0.70); 
    -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); 
} 
::-webkit-scrollbar-button{ 
    width: 0; 
    height: 0; 
    display: none; 
} 
::-webkit-scrollbar-corner { 
    background-color: transparent; 
} 

Tuttavia, purtroppo credo che non si può fare quello che chiedete.

JSFiddle

Answer 3

Risposta breve: No, non è possibile utilizzare transition su una lunga risposta ::-webkit-scrollbar

: Ci sono mezzi per ottenere un effetto simile interamente in CSS.

Spiegazione:

1. Abbiamo bisogno di creare un contenitore esterno che verrà scorrere. Quindi vogliamo creare un contenitore interno.
2. Il contenitore esterno avrà una proprietà background-color. Questa proprietà corrisponderà al colore su cui vogliamo passare per la barra di scorrimento.
3. Il contenitore interno corrisponderà all'altezza del contenitore esterno e avrà un background-color che maschera il contenitore esterno.
4. La barra di scorrimento background-color erediterà il contenitore esterno.
5. La proprietà transition verrà applicata allo background-color del contenitore esterno.

Uno svantaggio principale qui è che devi fare un po 'di mascheramento. Questo può essere un po 'complicato se il tuo sfondo non è un colore solido, dal momento che probabilmente il contenitore interno deve corrispondere. Se non è una preoccupazione, questo funzionerà per te. Ecco il codice per mettere tutto insieme per una pagina con uno elemento di scorrimento orizzontale.

HTML

<div id="container-outer"> 
    <div id="container-inner"> 
     <!-- Content goes here --> 
    </div> 
</div> 

CSS

/* Scrollbar */ 
    ::-webkit-scrollbar { 
     border: 0; 
     height: 10px; 
    } 
    ::-webkit-scrollbar-track { 
     background: rgba(0,0,0,0); 
    } 
    ::-webkit-scrollbar-thumb { 
     background-color: inherit; /* Inherits from outer container */ 
     border-radius: 20px; 
    } 

    /* Container */ 
    #container-outer { 
     overflow-y: hidden; 
     overflow-x: scroll; /* Horizontal-only scrolling */ 
     height: 400px; 
     background-color: white; /* Initial color of the scrollbar */ 
     transition: background-color 200ms; 
    } 
    #container-outer:hover { 
     background-color: red; /* Hover state color of the scrollbar */ 
    } 
    #container-inner { 
     background-color: white; /* Masks outer container */ 
     font-size: 0; 
     height: inherit; /* Inherits from outer container */ 
     width: 10000px; /* Set to see the scrolling effect */ 
    } 

Note:

• Dovrebbe essere ovvio, ma questa è una soluzione di Webkit. La domanda riguardava specificamente Webkit e non altro, quindi questa risposta riguarda solo Webkit.
• Probabilmente il tuo contenitore esterno avrà bisogno di un max-width che corrisponda a quello del tuo contenitore interno width, altrimenti potresti vedere qualche stranezza su schermi estremamente grandi. Questo è un caso limite per quando la larghezza del browser è maggiore della larghezza del contenuto che scorre orizzontalmente. Questo presuppone che tu stia usando una scroll orizzontale, come fa il codice di esempio.
• Nella maggior parte dei casi, gli stili di volo non funzionano come previsto per i dispositivi mobili. Questo è un problema dato come c'è un'enorme penetrazione nel mercato dei browser mobili Webkit. Prendi questo in considerazione prima di usare questa soluzione.

Answer 4

Ecco un'altra idea basata sulle risposte qui. Puoi usare il colore al posto del colore di sfondo e quindi il box-shadow per colorare il pollice (puoi anche modificare l'ombreggiatura del testo per divertirti come ho fatto io, ovviamente non un approccio pronto per la produzione ma puoi semplicemente sovrascrivere il colore nel contenitore secondario):

https://codepen.io/waterplea/pen/dVMopv

*::-webkit-scrollbar-thumb {   
    box-shadow: inset 0 0 0 10px; 
} 

div { 
    overflow: auto; 
    color: rgba(0, 0, 0, 0); 
    transition: color .3s ease; 
} 

div:hover { 
    color: rgba(0, 0, 0, 0.3); 
}